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>