Element UI table single-selection, multi-selection scenarios

Recently, when using Element UI to write a simple front-end page, I encountered a scenario where a table selection operation is required. When searching for information on the Internet, I found that there are too many implementation methods, so I simply summed up one by myself.

Not much to say, let’s move the code to see~

Single choice:

<template>
    ......
      <div class="table_content">
        <el-table ref="multipleTable"
                    :data="tableData"
                    :header-cell-style="tableHeaderColor"
                    style="width: 100%; height: 100%"
                    border
                    size="big"
                    @selection-change="handleSelectionChange"
                    @select-all="handleSelect"
                    @select="handleSelect">
          <el-table-column type="selection" width="80" align="center"/>
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="name" label="节目名称" width="220" align="center"></el-table-column>
          <el-table-column prop="type" label="类型" width="100" align="center"></el-table-column>
          <el-table-column prop="actor" label="表演者" align="center"></el-table-column>
        </el-table>
      </div>
    ......
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '《墩墩舞》', type: '舞蹈',  actor: 'XXX' },
        { name: '《茶艺》', type: '茶艺',  actor: 'xxx' },
        { name: '《我爱上班》', type: '朗诵',  actor: 'xxx' },
        { name: '《欢乐的跳吧》', type: '舞蹈',  actor: 'xxx' },
        { name: '《光的方向》', type: '歌唱',  actor: 'xxx' },
        { name: '《明天会更好》', type: '合唱',  actor: 'xxx' },
      ],
      multipleSelection: []
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    tableRowStyle({ row, rowIndex }) {
      return 'background-color:pink;font-size:15px;'
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return 'background-color:#e0b33a;color:#fff;font-wight:500;font-size:28px;text-align:center'
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelect (selection, row) {
      //阻止全选框原有逻辑
      this.$refs.multipleTable.clearSelection()
      if (row) {
        if (selection.length === 1) {
            this.multipleSelection = row
            this.$refs.multipleTable.toggleRowSelection(row, true)
        }
        else if (selection.length > 1) {
            this.multipleSelection = selection[0]
            this.$refs.multipleTable.toggleRowSelection(selection[0], true)
            this.$message('抱歉，每人只能选择一个节目，要专一噢~')
        }
      }
    }
  }
}
</script>

From the point of view of single-choice requirements, at least the following two points can be considered complete:

• Clicking the all-selection box can only cancel the selection of other boxes, and cannot complete the previous all-selection function
•  When the selection box is checked, the previous selection needs to be canceled

There are three form events on the official website , which are used to operate the selection box, the full selection box, and the selection change event. I use two functions to control these three events: handleSelectionChange, handleSelect. The handleSelectionChange function modifies the selected data each time the selection box is operated. The handleSelect function first clears all selections when operating the full selection box. Once the single box operation is not performed, the default is to cancel all selections. If the handleSelect function operates the radio button, if only one selection is currently selected, if multiple selections are selected, the last selected selection will be selected, and the new selection will be cancelled.

Multiple choice:

Just delete select-all, select table events and methods, and keep the following code

<template>
    ......
      <div class="table_content">
        <el-table ref="multipleTable"
                    :data="tableData"
                    :header-cell-style="tableHeaderColor"
                    style="width: 100%; height: 100%"
                    border
                    size="big"
                    @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="80" align="center"/>
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="name" label="节目名称" width="220" align="center"></el-table-column>
          <el-table-column prop="type" label="类型" width="100" align="center"></el-table-column>
          <el-table-column prop="actor" label="表演者" align="center"></el-table-column>
        </el-table>
      </div>
    ......
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '《墩墩舞》', type: '舞蹈',  actor: 'xxx' },
        { name: '《茶艺》', type: '茶艺',  actor: 'xxx' },
        { name: '《我爱上班》', type: '朗诵',  actor: 'xxx' },
        { name: '《欢乐的跳吧》', type: '舞蹈',  actor: 'xxx' },
        { name: '《光的方向》', type: '歌唱',  actor: 'xxx' },
        { name: '《明天会更好》', type: '合唱',  actor: 'xxx' },
      ],
      multipleSelection: []
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    tableRowStyle({ row, rowIndex }) {
      return 'background-color:pink;font-size:15px;'
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return 'background-color:#e0b33a;color:#fff;font-wight:500;font-size:28px;text-align:center'
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>