elementui el-table 多选 切换数据选中内容不清空并且自带回显默认选中

在Element UI的el-table组件中使用多选时，如果你遇到切换数据不清空之前选择的内容，并希望实现默认勾选的需求，可以通过以下方法实现：

1. 使用:row-key属性来设置唯一标识的字段。
2. 使用v-model绑定一个数组来存储选中的行数据。
3. 在数据更新时，确保你的row-key字段值是唯一的，这样就不会出现勾选错位的问题。
4. 对于默认勾选，可以在数据渲染后，使用Table组件的setSelectionRows方法设置默认勾选的行。

以下是一个简单的示例代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    v-model="selectedRows"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      selectedRows: [], // 存储选中行数据
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    // 初始化数据和默认勾选
    initData() {
      // 假设获取数据的API
      axios.get('/api/data').then(response => {
        this.tableData = response.data;
        
        // 设置默认勾选
        this.$nextTick(() => {
          this.selectedRows = this.tableData.filter(row => row.defaultSelected);
        });
      });
    }
  },
  mounted() {
    this.initData();
  }
};
</script>

在这个例子中，我们假设每个数据项都有一个唯一的id字段，并且通过defaultSelected属性来标识哪些行需要默认勾选。handleSelectionChange方法用来更新选中的行数据，而initData方法在组件加载后调用，用来获取数据并设置默认勾选。注意，Element UI的el-table组件没有直接的方法来设置默认勾选，因此需要我们在