elementPlus——多选表格变单选

小曲曲

已于 2023-02-22 15:59:13 修改

阅读量1.4k

点赞数

分类专栏： vue3.0 elementPlus 文章标签： javascript vue.js 前端

于 2023-02-21 15:14:31 首次发布

本文链接：https://blog.csdn.net/weixin_43848576/article/details/129143173

版权

vue3.0 同时被 2 个专栏收录

28 篇文章 4 订阅

订阅专栏

elementPlus

2 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue应用中，使用ElementPlus库的表格组件实现数据回显时的单选功能，并在用户操作后清除已选中的项。通过监听`select`和`selection-change`事件，以及调用`toggleRowSelection`方法，可以控制表格的选中状态。此外，还实现了隐藏全选按钮的样式调整，并提供了提交选中项的功能。

摘要由CSDN通过智能技术生成

在这里插入图片描述

选中数据回显
单选时，清除上一次选中的
清除所有选中的
隐藏全选按钮 table外边加一个div标签，否则不起作用
点击提交打印选中的

<template>
  <div>
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @select="selectClick"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="Date" width="120">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column property="name" label="Name" width="120" />
      <el-table-column property="address" label="Address" show-overflow-tooltip />
    </el-table>
  </div>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection()">Clear </el-button>
    <el-button @click="submit()">提交 </el-button>
  </div>
</template>

<script   setup>
import { ElTable } from 'element-plus'
import { onMounted } from 'vue';

// 数据会选
onMounted(() => {
  // 适用于单选
  // let row = tableData.filter((row) => row.date == '2016-05-04')
  // multipleTableRef.value.toggleRowSelection(row, true);
  // 适用于单选和多选
  tableData.forEach((row) => {
    if (row.date == '2016-05-04') {
      multipleTableRef.value.toggleRowSelection(row, true);
    }
  })
})

const multipleTableRef = ref()
const multipleSelection = ref([])
// 清空所有选中的
const toggleSelection = (rows) => {
  multipleTableRef.value.clearSelection()
}
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
// 控制单选——table选择项发生变化时
const selectClick = (selection, row) => {
  if (selection.length > 1) {
    let del_row = selection.shift();
    multipleTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
  }
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },

]
// 提交选中的项
const submit = () => {
  console.log(1111, multipleSelection)
}
</script>
<style scoped lang='scss'>
// 隐藏全选按钮
::v-deep .el-table th.el-table__cell:nth-child(1) .cell {
  visibility: hidden;
}
</style>