vue el-table设置符合条件的某些行不能选择
vue el-table设置符合条件的某些行不能选择,根据需求,第二次补充添加的时候,已经添加的项目需要置灰,不能再进行操作,未选择的可以继续添加。根据一位前辈的经验(非常感谢),进行操作,终于成功了,特来记录一下,方便学习,下面是主要代码。<el-table-columntype="selection":selectable="checkSelectable"width="60">&
·
vue el-table设置符合条件的某些行不能选择,根据需求,第二次补充添加的时候,已经添加的项目需要置灰,不能再进行操作,未选择的可以继续添加。
根据一位前辈的经验(非常感谢:vue el-table设置某些行不能选择以及特殊样式_且听风吟的博客-CSDN博客),进行操作,终于成功了,特来记录一下,方便学习,下面是主要代码。
<el-table-column
type="selection"
:selectable="checkSelectable"
width="60">
</el-table-column>
<span>已选择服务包</span>
<el-tag
:type="tag.type"
:key="tag.index"
v-for="(tag, index) in originalTableData">
<!-- originalTableData是新建时添加的数据选项,第二次打开增添时获取的已添加数据 -->
{{ tag.name }}
</el-tag>
</span>
methods: {
checkSelectable (row, index) {
debugger
/**
* row:当前每行的行数据
* index:当前第几位
*/
let flag = true
for (let i = 0; i < this.originalTableData.length; i++) {
if (row.id == this.originalTableData[i].id) {
flag = false
break
} else {
flag = true
}
}
return flag
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)