vue.js - 如何修改el-table-column slot="header" 中的 el-checkbox 呢？

Question

现在需要修改el-table-column slot="header" 中的 el-checkbox控制状态，选择表头的el-checkbox其他行checkbox都选中/取消这个已实现，但是当取消选择所有selected时，表头selectAll取消/选中失败，代码如下。js能打印出selectAll状态已发生改变，那么就是视图没有更新。思考了很久，没有找到合适的解决办法，请大佬们看看问题出现在哪里？谢谢！

 <el-table-column width="25" align="center" type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.shopList" border class="boxStyle">
              <el-table-column align="center" width="28" :key="props.row.index">
                <template slot="header">
                    <el-checkbox v-model="props.row.selectAll"
                      @change="selectionChange(props.row, true)"/>
                </template>
                <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.selected" 
                      @change="selectionChange(props.row)"/>
                </template>
              </el-table-column>
    selectionChange(row, isall){
      console.log(row, isall, 1800);
      if(isall){  
       // 全选
        row.shopList.forEach(item => {
          if(row.selectAll){
            this.$set(item, 'selected', true);
          }else{
            this.$set(item, 'selected', false);
          }
        });
      }else{   // 单选
        let selected = [];
        row.shopList.forEach(item=>{
          if(item.selected === true){
            selected.push(item);
          }
        });
        if(selected.length === row.shopList.length){
          this.$set(row, 'selectAll', true);
        }
      }
    },

Answer 1

重点

 <template #header>

就是当使用了 slot=“header” 表头数据不能用动态变量。需要用#header。 我没你数据，大概知道你的意思。你试试
然后记得赋值时候

 handleSelectAll(v) {
  this.checked = v;
  this.$forceUpdate(); //强制重新渲染
},

Answer 2

最后解决问题把slot="header"改成 #header, 添加key,如果有晃动则需要初始化的时候添加selected的值

Answer 3

首先，您遇到的问题可能是由于 props.row.selectAll 的双向绑定（v-model）在 el-table-column 的 slot="header" 中并不直接工作，因为 props.row 通常是只读的，它用于传递行数据给插槽作用域，而不应该直接用于修改。

另外，el-table 的表头通常是与表格的数据分开管理的，而不是绑定到 props.row 上的属性。这意味着您需要维护一个单独的变量来跟踪表头的全选状态。

下面是一个可能的解决方案，其中我引入了一个名为 isSelectAll 的变量来跟踪全选状态，并使用计算属性来根据子项的选中状态来确定是否应该选中全选框。

<template>
  <el-table :data="tableData" border>
    <!-- 其他列 -->

    <el-table-column width="25" align="center" type="expand">
      <template slot-scope="props">
        <el-table :data="props.row.shopList" border class="boxStyle">
          <el-table-column align="center" width="28">
            <template slot="header">
              <el-checkbox v-model="isSelectAll" @change="handleSelectAllChange"/>
            </template>
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.selected" @change="handleItemChange(scope.row, props.row)"/>
            </template>
          </el-table-column>
          <!-- 其他子表格列 -->
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // ... 您的表格数据，每个对象应包含 shopList 数组
      ],
      isSelectAll: false // 全选状态
    };
  },
  methods: {
    handleSelectAllChange() {
      this.tableData.forEach(row => {
        row.shopList.forEach(item => {
          this.$set(item, 'selected', this.isSelectAll);
        });
      });
    },
    handleItemChange(item, parentRow) {
      let selectedCount = parentRow.shopList.filter(i => i.selected).length;
      if (selectedCount === 0) {
        this.isSelectAll = false;
      } else if (selectedCount === parentRow.shopList.length) {
        this.isSelectAll = true;
      }
      // 这里不需要手动设置每个子项的 selected，因为 v-model 已经做了
    }
  }
};
</script>

注意，在上面的代码中，我移除了 selectionChange 方法，并替换了两个新的方法：handleSelectAllChange 用于处理全选状态的变化，handleItemChange 用于处理子项选择状态的变化。同时，我使用了 isSelectAll 变量来跟踪全选状态，而不是在 props.row 上设置 selectAll 属性。

另外，请注意，由于我不知道您的完整数据结构和需求，上述代码可能需要根据您的实际情况进行调整。