项目场景:
在项目中有这样一个需求,在一个页面中会展示审核通过数据和待审核的数据。通过Tabs标签页进行数据切换,列表中都有复选框,需要在待审核的数据中禁用某些复选框。
问题描述
在代码中复选框通过设置列的 type=“selection”,在通过selectable方法把数据为2016-05-02的复选框设置为不可勾选,具体代码如下:
<template>
<el-tabs v-model="activeName">
<el-tab-pane label="审核通过数据" name="first">审核通过数据</el-tab-pane>
<el-tab-pane label="未审核数据" name="second">未审核数据</el-tab-pane>
</el-tabs>
<div v-if="activeName=='first'">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column type="selection" width="50" fixed></el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
<div v-if="activeName=='second'">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column type="selection" width="50" :selectable="selectInit" fixed></el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
activeName: 'first',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
//复选框操作
selectInit(row,index){
if(row.date=='2016-05-02'){
return false //不可勾选
}else{
return true //可勾选
}
}
}
}
</script>
运行效果如下,发现设置并没有起作用
原因分析:
通过查询vue官网得知Vue 为了尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换。
解决方案:
这样也不总是符合实际需求,所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key attribute 即可。所以上面的代码我们只需要在复选框的元素上面加上key即可解决,如下:
<el-table-column type=“selection” width=“50” key=“sel1” fixed>
<el-table-column type=“selection” width=“50” key=‘sel2’ :selectable=“selectInit” fixed>
加上key后发现问题成功解决