element-ui 使用中遇到的问题及处理方法

1.table @selection-change与@row-click解耦合,触发方法内加入这两行:

checkData(val, column, event){
                event.preventDefault(); //防止@selection-change与@row-click事件耦合
                event.cancelBubble = true; //IE适配

2.table @row-click事件与行内@click事件耦合问题，给@click事件加上 .stop 后缀：

<template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click.stop="handleContent(scope.row)" type="primary">详情</el-button>
                </template>

3.page分页传参（方法复用时进行分页区分）

<el-pagination
                                class="page"
                                align='center'
                                @size-change="(val) => handleSizeChange(4, val)"
                                @current-change="(val) => handleCurrentChange(4, val)"
                                :current-page="page"
                                :page-sizes="[10,20,30,50]"
                                :page-size="rows"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>

方法接收参数

handleSizeChange(type, val) {
                this.page = 1;
                this.rows = val;
                if (type === 1) {
                    this.handleClick({index: '1'}, '', 1);
                }
          
            },

4. 动态绑定class

<span :class="[activeStyle == -1 ? 'checked':'']">
    <el-button type="text" @click="check(-1,0)">全部</el-button>
</span>
<span :class="[activeStyle == index ? 'checked':'']"
 v-for="(item,index) in qualificationCategoryLists">
	<el-button type="text" @click="check(index,item.code)">{{ item.value }}</el-button>
</span>

     check(i,id) {
                this.activeStyle = i;
            },