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

直接贴代码

<!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状态。

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

腹中有书气自华

引用和评论

uniapp中使用echarts 时在h5中 tooltips无效的解决办法

前端开发工具

开发插件集合

2024最全ECharts 实战大全（速记版+资源）

Vue.js-方法与事件

Vue使用mixins

startViewTransition的简单示例