el-table 表格全选

<template>
  <div>
    <el-checkbox v-model="checked" :disabled='checkedDis' @change="onAllSelectChange">全选</el-checkbox>

    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :selectable="() => {return selectable}" />
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120" />
    </el-table>

  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-03',
          name: '王小虎'
        },
        {
          id: 2,
          date: '2016-05-02',
          name: '王小虎'
        }
      ],
      multipleSelection: [], // 全选的数据
      selectable: true, // 全选框状态 true 可以选, false 禁用
      checked: false, // 全选值
      checkedDis: false, // 全选状态
      flag: 1
    }
  },
  methods: {
    //  多选
    handleSelectionChange (val) {
      this.multipleSelection = val
      // 解决全选时,触发多选方法
      if (this.flag == 2) {
        this.checkedDis = false
        return false
      }
      this.checkedDis = val.length > 0
    },
    //  选中数据
    onAllSelectChange () {
      if (this.checked) {
        this.toggleSelection()
      } else {
        // 恢复初始状态
        this.flag = 1
        this.selectable = true
        this.$refs.multipleTable.clearSelection()
      }
    },
    toggleSelection () {
      this.flag = 2
      // 当全选时,禁用列表多选框,阻止点击列表多选
      this.selectable = this.checked ? false : true
      // 假如接口返回指定勾选的数据
      // const ids = [1]
      // this.tableData.forEach(item => {
      //   if (ids.includes(item.id)) {
      //     this.$refs.multipleTable.toggleRowSelection(item)
      //   }
      // })
      // 如果只是前端处理
      this.tableData.forEach(item => {
        this.$refs.multipleTable.toggleRowSelection(item)
      })
    },
  }
}
</script>

<style>
</style>

相关推荐

最近更新

  1. leetcode705-Design HashSet

    2024-04-02 19:44:03       5 阅读
  2. Unity发布webgl之后打开streamingAssets中的html文件

    2024-04-02 19:44:03       5 阅读
  3. vue3、vue2中nextTick源码解析

    2024-04-02 19:44:03       6 阅读
  4. 高级IO——React服务器简单实现

    2024-04-02 19:44:03       5 阅读
  5. 将图片数据转换为张量(Go并发处理)

    2024-04-02 19:44:03       4 阅读
  6. go第三方库go.uber.org介绍

    2024-04-02 19:44:03       6 阅读
  7. 前后端AES对称加密 前端TS 后端Go

    2024-04-02 19:44:03       7 阅读

热门阅读

  1. Vue3创建空对象方法及推荐

    2024-04-02 19:44:03       2 阅读
  2. ChatGPT助力:提升学术论文写作的智能利器

    2024-04-02 19:44:03       6 阅读
  3. Maximum Product(UVA 11059)

    2024-04-02 19:44:03       4 阅读
  4. rust并行计算库Rayon

    2024-04-02 19:44:03       4 阅读
  5. 小波包变换(WPT)和OMP实现压缩感知

    2024-04-02 19:44:03       3 阅读
  6. k8s是什么

    2024-04-02 19:44:03       3 阅读
  7. vue获取上个月今天

    2024-04-02 19:44:03       3 阅读