最近在开发一个性能，点击增加商品按钮，展现商品列表弹层，点击复选框选中，弹层会敞开，并且再次点击商品按钮，之前被选中的复选框会不可点击，目标就是避免反复增加同一件商品，用到了数组办法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>