vue中table多选/单选行,获取其数据方式
作者：Slay__
这篇文章主要介绍了vue中table多选/单选行,获取其数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue table多选/单选行,获取其数据
多选
使用官方文档提供的方式：手动添加一个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]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
</template><script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 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'])
},用数组存储所选行，每次数组长度大于1时，会pop之前的行，保证数组中最多存在一个行的数据。获取该行某个属性的数据，用val[0]['属性名']。
注意：
this.$refs.multipleTableFrag.clearSelection()为通过table的属性ref值，找到相应的table，执行后面的clearSelection()方法。
若多个表，记得ref要写的不一样。
el-table 多选 单选功能
常见的el-table多选删除功能
<el-table :data="tableData" @selection-change="handleSelectionChange">
js: 将选择的id保存在一个数组里面，可以使用forEach或者map(map可以直接返回一个数组，较为方便)
// 表格复选框 数据
handleSelectionChange(val) {
this.changArr = []
val.forEach((item) => {
this.changArr.push(item.idBq)
})
},然后就是删除操作：
// 批量删除
deleteDatafile() {
if (this.changArr.length > 0) {
this.$confirm('此操作将永久批量删除该文件, 是否继续?', '提示', {
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"，在这个方法里面将数据前面的复选框回显上
<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
})
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。