iview Form Click switch viable entire line or radio button in front of a state checkboxes

Radio buttons and checkboxes trigger event iview tables are provided click a button to trigger, click counterparts elsewhere will not trigger, can be achieved by @ 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: { 
             / * * 
             * FORM OF trigger select line 
             * / 
            clickRow (Row, index) { 
                the this .enCode = row.id;    // radio trigger 
                the this $. refs.table.toggleSelect (index);   // multiple choice trigger 
            },
             / * * 
             * checkbox selection event 
             * / 
            the selectionChange (Val) { 
                the console.log (Val); 
                the this .taskSelectList = Val; 
            },
            / * * 
             * Set Header 
             * / 
            setColumns () { 
                the this .Columns = [
                     // checkbox 
                    { 
                        type: ' Selection ' , 
                        width: 100 , 
                        align = left: ' Center ' 
                    }, 
                    // radio button 
                    { 
                        title: ' select ' , 
                        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: ' number ' , 
                        type: ' index ' , 
                        align = left: " Center " , 
                        minWidth: 80 , 
                        maxWidth: 140 
                    }, 
                    { 
                        title: ' task name ' , 
                        Key: ' taskName ' ,
                        type: "TEXT",
                        align: "center",
                        minWidth: 200,
                        maxWidth: 360
                    }
                ]
            }
        }
    }
</script>

<style lang="stylus" scoped>

</style>

 

Guess you like

Origin www.cnblogs.com/stella1024/p/12457860.html