最近在开发一个性能，点击增加商品按钮，展现商品列表弹层，点击复选框选中，弹层会敞开，并且再次点击商品按钮，之前被选中的复选框会不可点击，目标就是避免反复增加同一件商品，用到了数组办法 indexOf()，用来判断我商品列表外面的商品有没有被选中过，如果选中了，则设置 item.checked = true。我把点击按钮展现弹层的步骤给省略掉了。上面是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 应用 element-ui 中的 el-radio（单选框）组件实现选中和勾销选中性能 </title>
<!-- 引入 element-ui 的款式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入 element 的组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app">
<div style="text-align: center; font-size: 20px"> 模仿一个弹层 </div>
<el-table :data="list" border fit highlight-current-row header-cell-class-name="chatail-table-header-cell">
<el-table-column label="商品名称" align="center" min-width="80">
<template slot-scope="{row}">
<span>{{row.name}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="60" fixed="right"
class-name="small-padding fixed-width">
<template slot-scope="{row}">
<el-checkbox v-model="row.checked" :disabled="row.checked" @change="checkedFun(row)">{{row.checked ? "已选" : "抉择"}}</el-checkbox>
</template>
</el-table-column>
</el-table>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
list: [
{
id: 1,
name: '测试商品 1'
},
{
id: 2,
name: '测试商品 2'
},
{
id: 3,
name: '测试商品 3'
},
{
id: 4,
name: '测试商品 4'
},
{
id: 5,
name: '测试商品 5'
},
]
}
},
mounted() {this.getProductList([1, 3, 5]);
},
methods: {getProductList(checkedIdArr) {this.list.forEach((item) => {
item.checked = false;
if (checkedIdArr && checkedIdArr.length > 0) {
// 传入的数据和列表里的数据比照，如果没有，则让复选框选中
if (checkedIdArr.indexOf(item.id) > -1) {item.checked = true;}
}
});
// 或者这样赋值也能够
// this.list = this.list.map((item) => {
// item.checked = false;
// if (checkedIdArr && checkedIdArr.length > 0) {// if (checkedIdArr.indexOf(item.id) > -1) {
// item.checked = true;
// }
// }
// return item;
// });
},
checkedFun(row) {let index = this.list.map(item => item.id).indexOf(row.id)
// 这样写也能够
// findIndex 用来获取数组中第一个满足条件的元素下标
// let index = this.list.findIndex((value, index, arr) => {
// return value.id == row.id
// })
// 这样就能够渲染到视图层了
this.$set(this.list, index, { ...row, checked: this.list[index].checked })
console.log(this.list, 'this.list---')
},
}
})
</script>
</body>
</html>