elementTable 全局实现单击行触发checkbox

    后台项目里应该有个常见需求,单击行时选中该行的checkbox,查了下网上element的解决方法,大多数都是在组件上绑定rowclick事件来实现的,感觉太麻烦了

    试了一下覆写elementtable的事件,好像没啥问题  大家可以试一下

首先引入依赖

import Vue from 'vue';

import Element from 'element-ui';

// 添加props 用来判断是否click触发toggleRowSelection , 防止组件上自己自定义的rowclick事件和我们添加的事件冲突

Element.Table.props.clickSelect = {

    type: Boolean,

    default: true,

};

查看element源码,复制过来

/** 覆写elementTable的mounted事件 给tablebody的rowclick事件加上判断 */

Element.Table.mounted = function () {

/** element源码*/

    this.bindEvents();

    this.store.updateColumns();

    this.doLayout();



    this.resizeState = {

        width: this.$el.offsetWidth,

        height: this.$el.offsetHeight

    };



    // init filters

    this.store.states.columns.forEach(column => {

        if (column.filteredValue && column.filteredValue.length) {

            this.store.commit('filterChange', {

                column,

                values: column.filteredValue,

                silent: true

            });

        }

    });



    this.$ready = true;

    // 下面是我们加的 click 触发toggleRowSelection

    if (this.clickSelect) {

        /** 重写click事件  默认选中时触发checkbox事件 */

        const children = this.$children;

        for (const child of children) {

            if (child.$options.name === 'ElTableBody') {

                child.handleClick = function (event, row) {

                    this.store.commit('setCurrentRow', row);

                    this.handleEvent(event, row, 'click');

                    // 手动触发toggleRowSelection 并执行select方法

                    this.$parent.toggleRowSelection(row, null, true);

                };

            }

        }

    }

}

这里还魔改了一下toggleRowSelection方法,原版之中该方法是不会触发checkbox的select事件的

/**

 * 切换列checkbox时触发select事件改为可配置

 * @param {*} row 列

 * @param {Boolean} selected 该值不填Boolean类型时, 切换checked状态  否则切换对应selected

 * @param {Boolean} handleChange  是否触发selelct事件

 */

Element.Table.methods.toggleRowSelection = function (row, selected, handleChange = false) {

    this.store.toggleRowSelection(row, selected, handleChange);

    this.store.updateAllSelected();

};

第一次尝试改，有问题大家帮忙看看。