elementplus 中elementtable type为selection,设置半选和全选状态

在Element Plus库中的`<el-table>`组件中，当你设置了`type`属性为`selection`，表示这是一个支持选择功能的表格。为了实现半选和全选的状态，你可以按照以下步骤操作：

1. 首先，需要包含`<template slot="row-class-name">`插槽，用于自定义行的样式，例如添加全选/半选的CSS类。

<template slot="row-class-name">
  <span :class="{ 'custom-select': row.isSelected, 'custom-half-select': row.isHalfSelected }"></span>
</template>

这里假设我们创建了两个CSS类名`custom-select`和`custom-half-select`分别对应全选和半选状态。

2. 然后，在Vue组件内管理表的选择状态，例如定义`selectedRows`数组存储所有选中的行，以及`isAllSelected`变量标识是否全选。

export default {
  data() {
    return {
      selectedRows: [],
      isAllSelected: false,
    };
  },
}

3. 当用户点击全选按钮时，遍历数据并更新`selectedRows`和`isAllSelected`。

methods: {
  toggleAllSelection() {
    this.$refs.table.selectAll();
    this.isAllSelected = true;
  },
  handleSelectChange(rows) {
    // 更新selectedRows
    this.selectedRows = rows;
    // 如果所有行都已选择，则设为全选，否则设为半选
    if (rows.length === this.tableData.length) {
      this.isAllSelected = true;
    } else {
      this.isAllSelected = false;
    }
  },
}

4. 最后，在`handleSelectChange`方法中处理`el-table`组件提供的`select-change`事件，这个事件会在用户选择/取消选择某一行时触发。

记得在模板中绑定`selectAll`和`isAllSelected`，以便控制全局选中状态。