iview中單擊行，使得checkbox狀態的方法

時間 2019-11-24

原文原文鏈接

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="../vue/vue.js"&gt;&lt;/script&gt;
    &lt;script src="../vue/iview/js/iview.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="../vue/iview/css/iview.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="app"&gt;
    &lt;i-table :columns="col" :data="data" @on-row-click="handlerClicked"&gt;&lt;/i-table&gt;
&lt;/div&gt;
&lt;script&gt;
    new Vue({
        el: '#app',
        data() {
            return {
                col: [
                    {
                        align: 'center',
                        title: '選項',
                        key: 'flag',
                        render: (h, params) =&gt; {
                            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 &amp;&amp; age === val.age &amp;&amp; flag === val.flag) {
                        item.flag = !item.flag
                    }
                })
            }
        }
    })
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

思路是這樣的:html