iview表格點擊整行都可行切換前面的單選按鈕或者多選按鈕的狀態

iview表格提供的單選按鈕和多選按鈕觸發事件都是點擊某個按鈕才會觸發，點擊同行的其他地方不會觸發，可以通過@on-row-click來實現：

 

<template>
    <div>
         <Table stripe :columns="columns" :data="datas" @on-row-click="clickRow" ref="table" @on-selection-change="selectionChange"></Table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                datas: [], 
                columns: [],
                enCode: "",
                taskSelectList: []
            }
        },
        mounted() {

        },
        methods: {
             /**
             * 表格點擊一行觸發選中
             */
            clickRow(row,index) {
                this.enCode = row.id;   // 單選觸發
                this.$refs.table.toggleSelect(index);  // 多選觸發
            },
            /**
             * 多選框選擇事件
             */
            selectionChange(val) {
                console.log(val);
                this.taskSelectList = val;
            },
            /**
             * 設置表頭
             */
            setColumns() {
                this.columns = [
                    // 多選框
                    {
                        type: 'selection',
                        width: 100,
                        align: 'center'
                    },
                    // 單選按鈕
                    {
                        title: '選擇',
                        key: 'chose',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            let id = params.row.id;
                            let flag = false;
                            if (this.enCode === id) {
                                flag = true
                            } else {
                                flag = false
                            }
                            return h('div', [
                                h('Radio', {
                                    props: {
                                        value: flag
                                    },
                                    on: {
                                        'on-change': () => {
                                            this.enCode = params.row.id;
                                        }
                                    }
                                })
                            ])
                        }
                    },
                    {
                        title: '序號',
                        type: 'index',
                        align: "center",
                        minWidth: 80,
                        maxWidth: 140
                    },
                    {
                        title: '任務名稱',
                        key: 'taskName',
                        type: "TEXT",
                        align: "center",
                        minWidth: 200,
                        maxWidth: 360
                    }
                ]
            }
        }
    }
</script>

<style lang="stylus" scoped>

</style>