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


    示例代码

    <template>
      <div>
        <el-table
          :data="tableData1"
          style=" 100%;margin-bottom: 20px;"
          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>
    
    
  • 相关阅读:
    [华为机试] 计算二进制数中1的个数
    vector释放
    opencv findcontours内存错误
    opencv的编译安装
    opencv SVM分类器模块的简单设计
    centos7.6安装FFMpeg
    centos安装jenkins
    centos 7.6安装Java
    Centos7 忘记密码的情况下,修改root或其他用户密码
    性能测试报告
  • 原文地址:https://www.cnblogs.com/loveliang/p/14187263.html
Copyright © 2020-2023  润新知