问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
送翔
    276106183

    现在需要修改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);
        }
      }
    },
    element-uivue.jstable
    阅读 1.3k
    avatarAI BotBETA

    首先，您遇到的问题可能是由于 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 属性。

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

    2 个回答
    得票最新
    头像
    送翔
      276106183
      ✓ 已被采纳

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

      头像
      this_MyFunction
        42722247

        重点

        image.png

         <template #header>

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

         handleSelectAll(v) {
  this.checked = v;
  this.$forceUpdate(); //强制重新渲染
},
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏