vue + element表格的增加复制和删除

表格片段 

script片段

注释：data里面通常都是设置数据的属性类型等，跟setup用法一致
 data() {
    return {
      // 笔记
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },

  methods: {
    注释：设置添加一行的行为，这里将tableData 里面的对象 push过来为新增一行的内容
因为push 过来的值没有数据，所以这里点击添加一行会添加空白的一行
    add() {
      this.tableData.push({
        date: '',
        name: '',
        address: '',
      })
    },

注释：设置复制的行为，需要给tableData 里面的对象设置string属性，这里传的参数row
是点击的那一行的数据进行复制，跟添加有点类似 
    copy(row: { date: string; name: string; address: string; }) {
      this.tableData.push(row)
    },

注释：设置删除的行为，这里传过来的 index是每个数据的索引值
splice有三个值可以设置，这里设置的是两个值：
index是点击的那一行的索引，
1是删除的个数，就是删除点击的 1个index
第三个这里不写，是添加的数据，

    move(index: number) {
      if (confirm('确定要删除吗') == true) {

注释：这里添加了一个询问是否删除的判断，不需要的可以直接不写
        this.tableData.splice(index, 1);
      }
    },
   
}

 添加一行：结果

这里点击了两次

 

 复制：结果

 

 删除：结果

 

 

 

完整的代码