vue中table多選/單選行,獲取其數(shù)據(jù)方式

更新時間：2023年07月25日 10:29:37 作者：Slay__

這篇文章主要介紹了vue中table多選/單選行,獲取其數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue table多選/單選行,獲取其數(shù)據(jù)

多選

使用官方文檔提供的方式：手動添加一個el-table-column，設type屬性為selection即可。

<template>
? <el-table
? ? ref="multipleTable"
? ? :data="tableData"
? ? tooltip-effect="dark"
? ? style="width: 100%"
? ? @selection-change="handleSelectionChange">
? ? <el-table-column
? ? ? type="selection"
? ? ? width="55">
? ? </el-table-column>
? ? <el-table-column
? ? ? label="日期"
? ? ? width="120">
? ? ? <template slot-scope="scope">{{ scope.row.date }}</template>
? ? </el-table-column>
? ? <el-table-column
? ? ? prop="name"
? ? ? label="姓名"
? ? ? width="120">
? ? </el-table-column>
? ? <el-table-column
? ? ? prop="address"
? ? ? label="地址"
? ? ? show-overflow-tooltip>
? ? </el-table-column>
? </el-table>
? <div style="margin-top: 20px">
? ? <el-button @click="toggleSelection([tableData[1], tableData[2]])">切換第二、第三行的選中狀態(tài)</el-button>
? ? <el-button @click="toggleSelection()">取消選擇</el-button>
? </div>
</template>

<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? tableData: [{
? ? ? ? ? date: '2016-05-03',
? ? ? ? ? name: '王小虎',
? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄'
? ? ? ? }, {
? ? ? ? ? date: '2016-05-02',
? ? ? ? ? name: '王小虎',
? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄'
? ? ? ? }],
? ? ? ? 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>

單選

在多選的基礎上修改，樣式不變，將handleSelectionChange方法修改為：

handleSelectionChange(val) {
? ? ? this.multipleSelection = val
? ? ? if (val.length > 1) {
? ? ? ? this.$refs.multipleTableFrag.clearSelection()
? ? ? ? this.$refs.multipleTableFrag.toggleRowSelection(val.pop())
? ? ? }
? ? ? console.log(val[0]['name'])
? ? },

用數(shù)組存儲所選行，每次數(shù)組長度大于1時，會pop之前的行，保證數(shù)組中最多存在一個行的數(shù)據(jù)。獲取該行某個屬性的數(shù)據(jù)，用val[0]['屬性名']。

注意：

this.$refs.multipleTableFrag.clearSelection()為通過table的屬性ref值，找到相應的table，執(zhí)行后面的clearSelection()方法。

若多個表，記得ref要寫的不一樣。

el-table 多選單選功能

常見的el-table多選刪除功能

<el-table :data="tableData" @selection-change="handleSelectionChange">

js: 將選擇的id保存在一個數(shù)組里面，可以使用forEach或者map(map可以直接返回一個數(shù)組，較為方便)

?// 表格復選框 數(shù)據(jù)
? ? ? ? handleSelectionChange(val) {
? ? ? ? ? ? this.changArr = []
? ? ? ? ? ? val.forEach((item) => {
? ? ? ? ? ? ? ? this.changArr.push(item.idBq)
? ? ? ? ? ? })
? ? ? ? },

然后就是刪除操作：

?// 批量刪除
? ? ? ? deleteDatafile() {
? ? ? ? ? ? if (this.changArr.length > 0) {
? ? ? ? ? ? ? ? this.$confirm('此操作將永久批量刪除該文件, 是否繼續(xù)?', '提示', {
? ? ? ? ? ? ? ? ? ? confirmButtonText: '確定',
? ? ? ? ? ? ? ? ? ? cancelButtonText: '取消',
? ? ? ? ? ? ? ? ? ? type: 'warning',
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? .then(() => {
? ? ? ? ? ? ? ? ? ? ? ? removeTag({
? ? ? ? ? ? ? ? ? ? ? ? ? ? idbqs: this.changArr,
? ? ? ? ? ? ? ? ? ? ? ? }).then((res) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (res && res.data.data) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$message.success('刪除成功')
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.queryData()
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? .catch(() => {
? ? ? ? ? ? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 'info',
? ? ? ? ? ? ? ? ? ? ? ? ? ? message: '已取消刪除',
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? },

單選刪除

直接使用 @select="select"，在這個方法里面將數(shù)據(jù)前面的復選框回顯上

?<el-table :data="tableData" @select="select">

js部分：

// 單選
? ? ? ? select(selection, row) {
? ? ? ? ? ? if (selection.length > 1) {
? ? ? ? ? ? ? ? let del_row = selection.shift()
? ? ? ? ? ? ? ? this.$refs.table.toggleRowSelection(del_row, false)
? ? ? ? ? ? }
? ? ? ? ? ? this.xmdmArr = []
? ? ? ? ? ? this.chooseList = []
? ? ? ? ? ? this.xmdmArr.push(row.xmdm)
? ? ? ? ? ? this.chooseList = row.bqszdx.map((item) => {
? ? ? ? ? ? ? ? return item.idBq
? ? ? ? ? ? })
? ? ? ? },