element自定义某一列做全选单选

前端路上迷茫的小鲨鱼

已于 2024-02-01 18:06:46 修改

阅读量427

点赞数 1

分类专栏： element 文章标签：前端 vue.js javascript

于 2023-06-14 17:23:39 首次发布

本文链接：https://blog.csdn.net/guoyu1_/article/details/131212227

版权

element 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue.js中使用el-table组件创建带有展开功能的表格，并实现了列头的全选和单选功能，以及对应的事件处理函数，如handleClick和handleChildrenClick，用于同步表格数据和列头的选择状态。

摘要由CSDN通过智能技术生成

<el-table
  v-loading="loading"
  :data="tableData"
  row-key="id"
  border
  default-expand-all
  tooltip-effect="dark"
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  <el-table-column
    v-for="(item,i) in columnList"
    :key="i"
    :prop="item.prop"
    :align="item.label !== '仓库名称' ? 'center' : 'left'"
    :class-name="item.current ? 'cellSelected' : ''">
    <template #header="data">
      <div>
        <span v-if="item.label == '仓库名称'">{{ item.label }}</span>
        <el-checkbox v-else v-model="item.current" class="fontBold text-black" @change="handleClick(data, $event)">{{ item.label }}</el-checkbox>
      </div>
    </template>
    <template slot-scope="scope">
      <span v-if="item.label == '仓库名称'">{{ scope.row.name }}</span>
      <el-checkbox v-else v-model="scope.row[item.prop]" @change="handleChildrenClick(item.prop, $event)"></el-checkbox>
    </template>
  </el-table-column>
</el-table>


      columnList: [
        { current: false, prop: 'name', label: '仓库名称' },
        { current: true, prop: 'project', label: '项目经理' },
        { current: false, prop: 'ui', label: 'UI工程师' },
      ],
      tableData: [
        {
          id: 1,
          name: '中国总仓',
          project: false,
          ui: false,
          children: [{
            id: 11,
            name: '华北仓（呼和浩特）',
            project: false,
            ui: false
          }, {
            id: 12,
            name: '华北仓（北京）',
            project: false,
            ui: false
          }]
        }
      ],

mounted() {
  this.drawTreeTable(this.columnList, this.tableData)
},
methods: {
    // 初始化渲染表格
    drawTreeTable(columnList, tableData) {
      columnList.map(x => {
        if (x.current) {
          this.findChild(tableData, x.prop, x.current)
        }
      })
    },
    // 全选
    handleClick({ column }, e) {
      const label = column.property
      this.columnList.map(item => {
        if (item.prop === label) {
          item.current = e
        }
      })
      this.findChild(this.tableData, label, e)
    },
    findChild(list, label, checked) {
      list.forEach(item => {
        item[label] = checked
        if (item.children) return this.findChild(item.children, label, checked)
      })
    },
    // 单选
    handleChildrenClick(label, e) {
      const flag = this.tableData.every(x => {
        const childFlag = this.find(x.children, label)
        return x[label] === true && childFlag
      })
      this.columnList.map(x => {
        if (x.prop === label) x.current = flag ? e : false
      })
    },
    find(list, label) {
      return list.every(x => x[label] === true)
    },
}