vue element table下拉load方法,以及根据表格数据索引删除数据

示例代码

<template>
  <div>
    <el-table
      :data="tableData1"
      
      row-key="id"
      :row-class-name="tableRowClassName"
      border
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData1: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          hasChildren: true
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          hasChildren: true
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          hasChildren: true
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          hasChildren: true
        }
      ],
      
    };
  },
  methods: {
    load(tree, treeNode, resolve) {
      let list = [
        {
          id: tree.id * 9,
          date: "2020" + tree.id + "4",
          name: tree.name + "aaa",
          address: tree.address + "bbb"
        }
      ];
      setTimeout(() => {
        resolve(list);
      }, 1000);
    },
    handleClick(row) {
      // 删除
      console.log(row.index,'this.selection.index,')
      this.tableData1.splice(row.index,1);
    },
    //获取当前点击行下标
    tableRowClassName({ row, rowIndex }) {
      console.log(row, rowIndex)
      //把每一行的索引放进row
      row.index = rowIndex;
     
    }
  }
};
</script>