element表格使用多选框

最新推荐文章于 2024-09-22 12:08:00 发布

阿友友

最新推荐文章于 2024-09-22 12:08:00 发布

阅读量2.8k

点赞数 1

分类专栏： element

本文链接：https://blog.csdn.net/qq_35702372/article/details/105056532

版权

element 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

element使用表格

<el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
      <el-button @click="toggleAll()">全选/全不选</el-button>
    </div>

data(){
    return{
tableData: [
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        }
      ],
}
}

toggleSelection(rows) {
      if (rows) {
        console.log(rows, "rows");
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    toggleAll() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

selection-change 当选择项发生变化时会触发该事件，将选中的选择项保存进ref中。

toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）。注意：1、this.$refs.数组.toggleRowSelection()中存放的应是:data="tableData"中的一个个对象。通过例如tableData[1]的下标进行确认到某一项，所以即使tableData中tableData[1]和tableData[2]里的属性全部相等，也不会选中tableData[2]。2、并且如果新建数组testData = tableData,使用this.$refs.multipleTable.toggleRowSelection(tableData[1]),也不会定位到该项。

由此基本可以判断，使用this.$refs.multipleTable.toggleRowSelection(item)时，这个item必须能指向multipleTable。

clearSelection 用于多选表格，清空用户的选择。通过this.$refs.数组.clearSelection() 可以将选中项清空。