iview中单击行，使得checkbox状态的方法

2024年1月11日 176次阅读 来源: 腹中有书气自华

直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
    <script src="../vue/iview/js/iview.min.js"></script>
    <link rel="stylesheet" href="../vue/iview/css/iview.css">
</head>
<body>
<div id="app">
    <i-table :columns="col" :data="data" @on-row-click="handlerClicked"></i-table>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                col: [
                    {
                        align: 'center',
                        title: '选项',
                        key: 'flag',
                        render: (h, params) => {
                            return h('Checkbox', {
                                props: {
                                    value: params.row.flag
                                }
                            })
                        }
                    },
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    }
                ],
                data: [
                    {
                        name: '小明',
                        age: 11,
                        flag: false
                    },
                    {
                        name: '小明1',
                        age: 12,
                        flag: true
                    }
                ]
            }
        },
        methods: {
            handlerClicked(val) {
                this.data.forEach(function (item) {
                    let { name, age, flag } = item
                    if (name === val.name && age === val.age && flag === val.flag) {
                        item.flag = !item.flag
                    }
                })
            }
        }
    })
</script>
</body>
</html>

思路是这样的:

  • 不使用iview默认的type中的selection，使用render函数来渲染checkbox选型。
  • 在data中定义flag来决定checkbox中的状态。
  • 监听row的on-row-click事件，获取当前行的数据，然后依次对data中的数据做对比，然后修改对应row中的flag状态。
    原文作者：腹中有书气自华
    原文地址: https://segmentfault.com/a/1190000012878643
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞