el-tabel表格加个多选框

javascript 复制代码
<template>
  <div>
    <el-checkbox v-model="checked" :disabled="checkedDis" @change="onAllSelectChange">多选框</el-checkbox>
    点击多选框,禁用列表复选框
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @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-column prop="address" label="地址" show-overflow-tooltip />
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          status: 1
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      checked: false, // 多选
      checkedDis: false, // 禁用多选框
      selectable: true, // 禁用列表复选框
      multipleSelection: [] // 选中的数据
    }
  },
  methods: {
    // 多选框
    onAllSelectChange () {
      this.tableData.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row)
      })
      this.checkedDis = false
      // 点击多选框,禁用列表复选框
      this.selectable = this.multipleSelection.length > 0 ? false : true
    },
    // 全选
    handleSelectionChange (val) {
      // 有数据则禁用多选框
      this.checkedDis = val.length > 0
      this.multipleSelection = val
    }
  }
}
</script>

<style>
</style>
相关推荐
天***88961 小时前
js封装一个双精度算法实现
开发语言·前端·javascript
胡斌附体1 小时前
使用Electron创建helloworld程序
前端·javascript·electron·nodejs·pc
toobeloong1 小时前
Electron 从低版本升级到高版本 - webview通信的改造
前端·javascript·electron
im_AMBER2 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界2 小时前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript
华仔啊3 小时前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
炒毛豆3 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
东东2334 小时前
前端规范工具之husky与lint-staged
前端·javascript·eslint
岁月宁静4 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js