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();
};

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

最后

以上就是秀丽小猫咪为你收集整理的elementTable 全局实现单击行触发checkbox的全部内容，希望文章能够帮你解决elementTable 全局实现单击行触发checkbox所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。