关于element ui里的多选反选表格的问题（toggleRowSelection）
不想看过程的可以直接后面
大家可以先看下文档的效果
文档链接element官方文档
需求是希望进来默认能选择上次选中的东西，如下图：
大概看了下例子，直接开始上手改装（不太好的毛病，大家还是仔细看文档）
一顿操作猛如虎，一看反选选不上，奇怪了
具体代码如下：
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" max-height="250" size="mini" border @selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" align="center"></el-table-column>
<el-table-column prop="student_title" label="名称" align="center"></el-table-column>
<el-table-column prop="topics_num" label="题量" align="center"> </el-table-column>
<el-table-column prop="count" label="时长" width="120" align="center"> </el-table-column>
</el-table>
然后在接口的回调函数里进行赋值
this.List = [{
date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }]
this.toggleSelection(this.List)
toggleSelection方法
toggleSelection (rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row)
})
} else {
this.$refs.multipleTable.clearSelection()
}
}
结果发现： 反选不上，但是全选按钮却有一种有值的感觉
开始排查问题发现
handleSelectionChange (val) {
console.log(val)
this.$emit('haveChosen', val, this.totalNumber)
}
这个绑定的地方可以输出，确实是有值，好像有一种List的值和tableData里不一样的感觉（后来证明确实不太一样，原因还未知，留个坑，欢迎广大网友评论里指导留言）
然后发现改成这样，有用
this.toggleSelection([this.tableData[2]])
然后决定改一下
this.List = [{
date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }]
this.toggleSelection(this.List)
toggleSelection (rows) {
if (rows) {
rows.forEach(row => {
this.tableData.forEach((item, index) => {
if (item.id === row.id) {
this.$refs.multipleTable.toggleRowSelection(this.tableData[index])
}
})
})
} else {
this.$refs.multipleTable.clearSelection()
}
}
嗯～～～
又不好用啦～～～
经过排查，发现是加载顺序的问题，决定用this.$nextTick()
**
代码
**
toggleSelection (rows) {
if (rows) {
this.$nextTick(() => {
rows.forEach(row => {
this.tableData.forEach((item, index) => {
if (row.id === item.id) {
this.$refs.multipleTable.toggleRowSelection(this.tableData[index])
}
})
})
})
} else {
this.$refs.multipleTable.clearSelection()
}
}
问题解决
页面代码整理如下
<template>
<div>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" max-height="250" size="mini" border @selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" align="center"></el-table-column>
<el-table-column prop="student_title" label="名称" align="center"></el-table-column>
<el-table-column prop="topics_num" label="题量" align="center"> </el-table-column>
<el-table-column prop="count" label="时长" width="120" align="center"> </el-table-column>
</el-table>
{
{
recommendedList}}
</div>
</template>
<script>
import {
APIPRECOMMENDEDCOMBINATIONSLIST} from '@/common/api.js'
export default {
props: ['recommendedList'],
data () {
return {
totalNumber: Number,
tableData: [],
List: []
}
},
created () {
this.tableList()
},
methods: {
tableList () {
APIPRECOMMENDEDCOMBINATIONSLIST({
type: 2
}).then((res) => {
if (res.status === 1) {
this.tableData = res.data.list
this.totalNumber = res.data.totalNumber
this.toggleSelection(this.recommendedList)
} else {
this.$message.error(res.msg)
this.tableData = []
this.tableData.push(this.seacherTab)
}
}).catch((err) => {
this.$message.error(err.msg)
})
},
toggleSelection (rows) {
if (rows) {
this.$nextTick(() => {
rows.forEach(row => {
this.tableData.forEach((item, index) => {
if (row.id === item.id) {
this.$refs.multipleTable.toggleRowSelection(this.tableData[index])
}
})
})
})
} else {
this.$refs.multipleTable.clearSelection()
}
},
handleSelectionChange (val) {
this.$emit('haveChosen', val, this.totalNumber)
}
}
}
</script>