vue插件ele使用小坑

1.ele-table组件中selection如何默认选中

　使用官网提供的api-->>Table Methods中的toggleRowSelection,关于这个api基本介绍就不说了。

　在vue中使用方式：建议在computed中使用，监听table（ref="table",:data="data"）中绑定的数据data变化情况，通过相关条件判定table中的row是否被勾选，代码如下：

　　computed:{

　　　　listenData(){

　　　　　　for(var item of this.data){

　　　　　　　　　if(判断条件)this.$refs.table.toggleRowSelection(item,true)

　　　　　　}

　　　　　　return this.data
　　　　}
　　}

　　上述代码，符合判断条件的默认勾选，下载computed中可以异步请求数据

2.同页面中多个 el-select 的 change 事件的互相影响

　 change事件监听的的该 el-select 值的变化。若select存在，则会一直监听。

　修改前：

<el-select v-if="showSelect" :key="indexb" v-model="item.status" @change="change" :class="'color'+item.status">

  <el-option

     v-for="(item,index) in statusA"

     :key="index"

     :label="item.label"

     :value="item.val">

   </el-option>

 </el-select>

　出现时机：showSelect:true, statusA改变，会触发change事件

　解决方案：

　　1.由于select的监听机制，可以先showSelect=false;showSelect=true;会导致重绘，不推荐

　　2.change事件仍然可以执行，但对执行时机进行筛选，推荐筛选时机为@visible-change 为 true 和 false

<el-select v-show="showSelect" :key="indexb" v-model="item.status" @change="change" @visible-change="canChange" :class="'color'+item.status">

    <el-option

    v-for="(item,index) in statusA"

    :key="index"

    :label="item.label"

    :value="item.val">

    </el-option>

  </el-select>

3.单页面使用table时，由于需要固定头部，并且需要table的height需要响应屏高

　出现时机：页面使用弹性布局，动态获取并且设置table的height

　　问题：在使用动态组件（组件中多次调用需要响应的table）的时候，table适配的只有第一个动态组件中的；

　　解决方案：

　　　　1.由于使用的弹性布局，计算对应的元素的height时，使用上级元素。

4.table组件中对列使用fixed="left | right",固定列高度不对的情形

　　出现几率：随机。

　　出现时机：由于现有的table组件样式不符合业务场景的要求，在对table进行全局修改之后。

　　临时应对方案：

　　　　1.增加行高

　　　　2.缩小字体

5.table组件内容出现滚动条，导致列对不齐

　　出现几率：使用小米笔记本测试时

　　解决方案：table组件加上 max-height 或者 height。

6.使用ele提供cascader级联选择器时出现无限render

　　多次测试是由于设置props导致，使用默认值就可以了

秒客网

vue插件ele使用小坑

相关文章