如何修改el-table-column slot="header" 中的 el-checkbox 呢?

作者站长头像
站长
· 阅读数 10

现在需要修改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);
        }
      }
    },
回复
1个回答
avatar
test
2024-06-28

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容