elementTable 全局实现单击行触发checkbox

77 阅读 0 评论 51 点赞

我是靠谱客的博主秀丽小猫咪，这篇文章主要介绍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);
                };
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/** 覆写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事件的

复制代码

1
2
3
4
5
6
7
8
9
10
/**
 * 切换列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();
};

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