Element UI实现表格全选、半选

制作如图所示的表格全选、半选:

父组件

html 复制代码
<template>
  <div id="app">
    <SelectHost :hostArray="hostArray" />
  </div>
</template>

<script>
import SelectHost from './components/SelectHost.vue'
export default {
  name: 'App',
  components: {
    SelectHost
  },
  data() {
    return {
      hostArray: [
        {
          "uuid": "bdd6565dfef7424885e48b655134b856",
          "ip": "30.184.21.55",
          "port": "80",
          "priority": "0",
          "status": "Running",
          "vmName": "CQB-L0703002",
          "vmType": "ECS",
          "weight": "10"
        },
        {
          "uuid": "493e1c76bbd4457aa74a9066f0eb1fa3",
          "ip": "30.184.8.7",
          "port": "80",
          "priority": "0",
          "status": "Running",
          "vmName": "CQB-L0615064",
          "vmType": "ECS",
          "weight": "10"
        },
        {
          "uuid": "6f98e7fa0ec94ca7923afc11660ea642",
          "ip": "30.98.188.157",
          "port": "80",
          "priority": "0",
          "status": "Running",
          "vmName": "SZE-L0812244",
          "vmType": "ECS",
          "weight": "1"
        }
      ]
    }
  },
}
</script>

<style lang="scss">
#app {
  padding: 20px;
}
</style>

子组件:自己手搓

html 复制代码
<template>
  <div style="position: relative">
    <!-- 全选 or 取消全选 -->
    <div class="header-checkbox">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAll" />
    </div>

    <el-table :data="hostArray" border>
      <el-table-column width="44" align="center" class-name="row-uuid">
        <template slot-scope="scope">
          <el-checkbox-group v-model="checkList" @change="handleCheckRow">
            <el-checkbox :label="scope.row.uuid" />
          </el-checkbox-group>
        </template>
      </el-table-column>
      <el-table-column label="主机名" prop="vmName" align="center" />
      <el-table-column label="主机IP" prop="ip" align="center" />
      <el-table-column label="状态" prop="status" align="center" />
      <el-table-column label="主机类型" prop="vmType" align="center" />
      <el-table-column label="后端端口" prop="port" align="center" />
      <el-table-column label="权重" prop="weight" align="center" />
      <el-table-column label="优先级" prop="priority" align="center" />
    </el-table>


  </div>
</template>

<script>
export default {
  name: 'SelectHost',
  props: {
    hostArray: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      isIndeterminate: false,  // 设置半选的样式
      checkAll: false,  // 全选、取消全选的状态
      checkList: [],  // 单元行的选择状态
    }
  },
  methods: {
    // 全选、取消全选
    handleCheckAll(val) {
      this.checkList = val ? this.hostArray.map(item => item.uuid) : []
      this.isIndeterminate = false
    },
    // 单元行的选择
    handleCheckRow(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.hostArray.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.hostArray.length
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep .row-uuid .el-checkbox__label {
  display: none;
}
.header-checkbox {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 15px;
  top: 10px;
}
</style>

子组件:Element UI封装好的

html 复制代码
<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="hostArray"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="44">
      </el-table-column>
      <el-table-column label="主机名" prop="vmName" align="center" />
      <el-table-column label="主机IP" prop="ip" align="center" />
      <el-table-column label="状态" prop="status" align="center" />
      <el-table-column label="主机类型" prop="vmType" align="center" />
      <el-table-column label="后端端口" prop="port" align="center" />
      <el-table-column label="权重" prop="weight" align="center" />
      <el-table-column label="优先级" prop="priority" align="center" />
    </el-table>

    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([hostArray[1], hostArray[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SelectHost',
  props: {
    hostArray: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      multipleSelection: []
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
相关推荐
张晓~183399481218 分钟前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周11 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021113 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅17 分钟前
介绍electron
前端·javascript·electron
周胡杰19 分钟前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
315356691320 分钟前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑22 分钟前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue7737 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
轻语呢喃41 分钟前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人42 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架