Vue3 Element Plus 默认选中的内容得通过接口或者其他方式获取

56 min read
<template>
  <div class="wrap">
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%">
      <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">切换</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      // 假如是通过接口或者其他形势获得的某个选中行内容,注意这里多了几个字段
      multipleSelection: [
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          description: '这里是描述',
          type: '类型',
          id: 'aaaaa111111'
        }
      ]
    }
  },
  methods: {
    toggleSelection() {
      // 提取出table表行字段对应的字段
      this.multipleSelection.forEach(row => {
        const obj = {
          date: row.date,
          name: row.name,
          address: row.address
        };
        this.$refs.multipleTable.toggleRowSelection(obj,true);
      });
    },
  }
}
</script>

<style lang="stylus" scoped>
.wrap{
  padding: 10px;
}
</style>

从列表(tableData)中找到需要选中的对象,把它筛选出来作为选中的项。注意:寻找的字段要唯一;
因此,我们将上面的方法改为如下的写法就可以了。

methods: {
  toggleSelection() {
    this.multipleSelection.forEach(row => {
      this.$refs.multipleTable.toggleRowSelection(
        this.tableData.find(item => { return row.date == item.date;}
      ),true);
    });
  }
}