【项目经验】:elementui多选表格默认选中
    		       		warning:
    		            这篇文章距离上次修改已过427天,其中的内容可能已经有所变动。
    		        
        		                
                在Element UI中,如果你想要在表格中默认勾选某些行,你可以使用el-table的ref属性来引用表格,并使用toggleRowSelection方法来切换某一行的选中状态。
以下是一个简单的例子,展示了如何在Element UI的多选表格中默认勾选某些行:
<template>
  <el-table
    :data="tableData"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎', ... }, ...], // 你的数据
      multipleSelection: [], // 已选项数据
    };
  },
  mounted() {
    this.toggleSelection([
      // 默认勾选的行,可以通过任意属性来筛选
      { date: '2016-05-02', name: '王小虎', ... },
      // ...
    ]);
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    toggleSelection(rows) {
      if (rows.length) {
        rows.forEach(row => {
          // 确保row存在于tableData中
          const found = this.tableData.some(record => record.date === row.date);
          if (found) {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  },
};
</script>在这个例子中,我们在mounted钩子中调用了toggleSelection方法,并传递了一个数组,该数组包含了我们想要默认勾选的行。toggleSelection方法会遍历这个数组,并使用toggleRowSelection方法来选中表格中与数组项匹配的行。如果你想取消所有的选择,只需要传递一个空数组给toggleSelection方法即可。
评论已关闭