vue中用原生table写可编辑表格 , 点击按钮添加行 , 点击序号删除行_vue v-simple-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: "",
          content: "",
          remark: ""
        }, {
 
          item: "",
          content: "",
          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>