Element UI 表格单选、多选情景-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI 表格单选、多选情景。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近在使用Element UI编写简单前端页面时会遇到需要对表格进行选择操作的场景。在网络上面查询资料时发现实现方式多的看花眼，索性自己总结一个。

话不多说，搬代码来看看～

单选：

<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>

Element UI 表格单选、多选情景

从单选这一块需求来看，至少满足下面两点才能算是完成：

全选框的点击只能取消其他框的选择，不能完成之前的全选功能
选择框被复选的时候需要取消之前的选择

在官网上有三个表格事件，分别用来操作选择框、全选框、选择改变的事件。这三个事件我使用两个函数进行控制：handleSelectionChange、handleSelect。handleSelectionChange函数在每次操作选择框的时候修改选择到的数据。handleSelect函数在操作全选框的时候先清空全选选择，一旦没有进行单选框操作就默认为取消全选。handleSelect函数操作单选框的话，如果当前只有一个selection则选中，选中多个selection的话，则选中上一次选中的selection，新的selection会被取消。

多选：

只需删除select-all、select表格事件及方法，保留如下代码即可

<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>

Element UI 表格单选、多选情景文章来源地址https://www.toymoban.com/news/detail-507409.html