当前位置：首页 > article >正文

el-table多列勾选

article 2025/2/12 8:55:52

新来的产品想要大改造权限设置，行可以点，列也可以点，有点复古逆天

尝试，适合固定的已知的列，如果以后是接口动态列，估计还得改

                 <!-- 行全选 -->
     <el-table-column
         align="center"
          :resizable="false" 
        fixed="left"
     >
        <template slot="header" slot-scope="scope">
            <el-checkbox v-model="allChecked.all"                 
             @change="handleAllHeaderCheck('all')"></el-checkbox>
          </template>
             <template slot-scope="scope">
              <el-checkbox 
                  :value="scope.row.all"
                   @change="handleLineCheck(scope.row)"
               />
               </template>
       </el-table-column>
  <!-- 功能列 -->
    <el-table-column label="功能" align="center">
      <template slot="header" slot-scope="scope">
        <span>功能</span>
        <el-checkbox v-model="allChecked.function"         
            @change="handleAllHeaderCheck('function')"></el-checkbox>
      </template>
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.function"></el-checkbox>
      </template>
    </el-table-column>

  data(){
   return {
    // 表头复选框的状态
      allChecked: {
        all: false,
        function: false,
        // ... 其他列的状态
      },
     list:[
        ...
            all: false,
            function: false,
            // ... 其他列的状态
            children: [
              {
                ...
                all: false,
                function: false
                // ... 其他列的状态
              },
     ]
    }
   }
      // 处理表头复选框点击
    handleAllHeaderCheck(column) {
      const checked = this.allChecked[column]
      // 递归深度遍历list 更新该列所有行的复选框状态
      function deepTraversal(list) {
        list.forEach(item => {
          item[column] = checked
          if(item.children && item.children.length) {
            deepTraversal(item.children)
          }
        })
      }
      deepTraversal(this.list) 
    }
    // 点击进行行全选
    handleLineCheck(row) {
      // 获取新的勾选状态(取反)
      const newCheckedState = !row.all 
      let index = this.list.findIndex(item => item.name == row.name)
        // 更新该行所有复选框状态
        for(let key in this.allChecked) {
          // row[key] = newCheckedState
          this.$set(this.list[index], key, newCheckedState) 
        } 
        // // 如果有子节点，递归更新子节点的状态
        // if(row.children && row.children.length) {
        //   const updateChildren = (children) => {
        //     children.forEach(child => {
        //       for(let key in this.allChecked) {
        //         child[key] = newCheckedState
        //       }
        //       if(child.children && child.children.length) {
        //         updateChildren(child.children)
        //       }
        //     })
        //   }
        //   updateChildren(row.children)
        // }
    }