zoukankan      html  css  js  c++  java
  • 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>
    
    
  • 相关阅读:
    团队项目第一阶段-意见评论
    团队项目第一阶段-意见汇总
    团队项目第一阶段-项目评审
    团队第一阶段冲刺成果展示
    2020年12月13日
    2020年12月12日
    2020年12月11日
    2020年12月10日
    2020年12月9日
    《代码大全2》阅读笔记06
  • 原文地址:https://www.cnblogs.com/loveliang/p/14187263.html
Copyright © 2011-2022 走看看