vue中用原生table写可编辑表格 , 点击按钮添加行 , 点击序号删除行

主要功能 :

1,一个表格,单元格内容是循环渲染的,点击每个单元格弹出一个输入框,编辑内容 

2,点击按钮添加行,点击序号删除行 

刚开始想用插件写的,网上找了半天,  研究好久搞不出来需要的效果 ,最后还是自己用table标签手写实现的 

<template>
  <div>
       <table class="tb1">
          <tr class="th">
            <td></td>
            <td>工作事项</td>
            <td>工作内容</td>
            <td>备注</td>
          </tr>
          <tr v-for="(item,index) in list" :key="index">
            <td @click="del(index)">{{index+1}}</td>
            <td>
              <input type="text" v-model="item.item" @click="modifyItem(item,index)">
            </td>
            <td>
              <input type="text" v-model="item.content" @click="modifyContent(item,index)">
            </td>
            <td>
              <input type="text" v-model="item.remark" @click="modifyRemark(item,index)">
            </td>
          </tr>
      </table>

        <van-button type="info" size="small" @click="addRow" class="addBtn" v-if="this.$store.state.isHeadShow">+ 添加行
          (点序号删除行)
        </van-button>

        <van-button type="info" size="small" class="btn" @click="submit" >提交
        </van-button>

        <!-- 编辑工作事项 -->
        <van-popup v-model="isItemShow" position="bottom" :style="{ height: '65%' }">
          <van-nav-bar title="工作事项" left-arrow @click-left="isItemShow=false" right-text="确定" @click-right="confirmItem" />
          <van-field v-model="itemTxt" rows="10" autosize type="textarea" placeholder="输入工作事项" :readonly="readonly" />
        </van-popup>

        <!-- 编辑工作内容 -->
        <van-popup v-model="isContentShow" position="bottom" :style="{ height: '65%' }">
          <van-nav-bar title="工作内容" left-arrow @click-left="isContentShow=false" right-text="确定" @click-right="confirmContent" />
          <van-field v-model="contentTxt" rows="10" autosize type="textarea" placeholder="输入工作内容"
            :readonly="readonly" />
        </van-popup>

        <!-- 编辑备注 -->
        <van-popup v-model="isRemarkShow" position="bottom" :style="{ height: '65%' }">
           <van-nav-bar title="备注" left-arrow @click-left="isRemarkShow=false" right-text="确定" @click-right="confirmRemark" />
          <van-field v-model="remarkTxt" rows="10" autosize type="textarea" placeholder="输入备注" :readonly="readonly" />
        </van-popup>
    
  </div>
</template>

<script>

  export default {
  
  

    data() {
      return {
  
        index: "",list: [{
          item: "",content: "",remark: ""
        },{

          item: "",remark: ""
        }],isItemShow: false,itemTxt: "",isContentShow: false,contentTxt: "",isRemarkShow: false,remarkTxt: "",}
    },methods: {
     
      // 添加行
      addRow() {
        this.list.push({})
      },// 删除行
      del(index) {
        this.list.splice(index,1)
      },// 编辑工作内容
      modifyContent(val,index) {
        console.log(val);
        this.isContentShow = true;
        this.contentTxt = val.content;
        this.index = index

      },// 编辑工作事项
      modifyItem(val,index) {
        this.isItemShow = true;
        this.itemTxt = val.item;
        this.index = index

      },//编辑备注
      modifyRemark(val,index) {
        this.isRemarkShow = true;
        this.remarkTxt = val.remark;
        this.index = index

      },confirmItem() {
        this.list[this.index].item = this.itemTxt;
        this.isItemShow = false;
      },confirmContent() {
        this.list[this.index].content = this.contentTxt;
        this.isContentShow = false;
      },confirmRemark() {
        this.list[this.index].remark = this.remarkTxt;
        this.isRemarkShow = false
      }

    }
  }

</script>

<style lang="scss" scoped>

  .tb1 {
    width: 95%;
    margin: auto;
    margin-top: 0.5rem;
    text-align: center;

    td {
      font-size: 0.21rem;
    }

    td:nth-child(1) {
      width: 0.67rem;
    }

    input {
      width: 100%;
      border: none;
      outline: none;
    }

    .th {
      background-color: #f3f6fd;
    }
  }

  

  /deep/ .van-nav-bar__text {
    color: white;
  }

 
  .btn {
    position: absolute;
    right: 0.5rem;
    margin-top: 1rem;

  }

  .addBtn {
    position: absolute;
    left: 0.5rem;
    margin-top: 1.1rem;
  }


</style>