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>
    
    
  • 相关阅读:
    仿12306客户端
    object-c开发中混合使用或不使用ARC
    Objective-c 的 @property 详解
    iPhone的Push(推送通知)功能原理浅析
    Objective-C内存管理教程和原理剖析3
    IDEA 创建JAVA Maven Web 工程
    Linux CenOS 7 安装Redis
    Linux CenOS 7 安装Tomcat
    Linux CentOS 7 安装wordpress
    Linux CenOS 7 安装JDK
  • 原文地址:https://www.cnblogs.com/loveliang/p/14187263.html
Copyright © 2011-2022 走看看