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>

 

上一篇:python爬虫-纠正MD5错误认知


下一篇:CSS3中border-radius的八个参数