zoukankan      html  css  js  c++  java
  • 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',
                             100,
                            align: 'center'
                        },
                        // 单选按钮
                        {
                            title: '选择',
                            key: 'chose',
                             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>
  • 相关阅读:
    并发编程的核心问题
    线程池的作用
    结构化并发编程:并发编程的分解方式与组织形式
    Dispatch Group
    yii视频地址哦
    Redis--各个数据类型最大存储量
    php开发中处理emoji表情和颜文字的兼容问题
    面向对象的三个基本特征(讲解)
    详解Ajax请求(四)——多个异步请求的执行顺序
    red入门学习笔记
  • 原文地址:https://www.cnblogs.com/stella1024/p/12457860.html
Copyright © 2011-2022 走看看