学堂学堂学堂公众号手机端

使用数组方法indexOf()判断两个数组里面是否有相同项，如果不包含，则添加item.checked = true

lewis 1年前 (2024-04-25) 阅读数 12 #技术

最近在开发一个功能，点击添加商品按钮，展示商品列表弹层，点击复选框选中，弹层会关闭，并且再次点击商品按钮，之前被选中的复选框会不可点击，目的就是防止重复添加同一件商品，用到了数组方法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>

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：小试牛刀-1.6(小试牛刀还是牛刀小试) 下一篇：57-System V 共享内存-shmctl