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>
相关推荐
袁煦丞3 分钟前
ONLYOFFICE让局域网外也能实时轻松协作?cpolar内网穿透实验室第510个成功挑战
前端·程序员·远程工作
Jinxiansen02113 分钟前
TypeScript 中的内置工具类型(Utility Type)
javascript·ubuntu·typescript
koooo~3 分钟前
JavaScript 与 C语言基础知识差别
c语言·开发语言·javascript
止观止6 分钟前
深入学习前端 Proxy 和 Reflect:现代 JavaScript 元编程核心
前端·javascript·学习
ChongYu重玉8 分钟前
【node/vue】css制作可3D旋转倾斜的图片,朝向鼠标
javascript·css·vue.js·经验分享·笔记·node.js·vue
yuanmenglxb200412 分钟前
浏览器渲染原理
前端·面试·浏览器渲染原理
薛定谔的算法13 分钟前
猜你想不到SPA相比于传统页面的6个特点
前端·javascript·react.js
ui设计前端开发老司机13 分钟前
从数据洞察到设计创新:UI前端如何利用数字孪生提升产品交互体验?
前端·ui·交互
3Katrina18 分钟前
《解锁现代Web开发:SPA核心原理与性能优化实战》
前端·javascript
伍哥的传说21 分钟前
React强大且灵活hooks库——ahooks入门实践介绍
前端·react.js·前端框架·ahooks·useclickaway·userequest·usedebouncefn