Element 相关组件使用时遇到的一些坑点分享
element ui 相信很多使用vue开发的同学对它都不陌生,它使我们的前端开发变得更加简单,在此也非常感谢element的开发团队,但是也多多少少给我们的开发增加了些许痛点,坑点,在这里我分享几处我在开发中遇到的问题。
1、el-table树形数据,scope.$index问题
el-table中的树形数据,当表格是树形数据时,scope.$index的值子节点在部分浏览器中index是从父节点的index依次排下来的,如果在数据中操作行,只想以第一级树结构的index为数据操作项时,此时如果点击的是树子级数据,这个时候index的值就不会按照你想要的去走了,此时想对行进行操作时,就不要用表格中的scope.$index作为参数了,可以自行定义一个参数。
2、el-cascader使用动态数据需要加key
cascader中数据是通过接口请求,每次都有可能是不同数据时,需要在组件中动态的添加key值
<el-cascader
ref="dictCascaderRef"
placeholder
:key="cascaderKey"
:options="options"
filterable
:debounce="debounce"
@change="getChange"
@visible-change="visibleChange"
:props="props"
></el-cascader>
cascaderKey在每次请求接口时动态增加
代码示例:
data() {
let that = this;
return {
cascaderKey: 1
}
}
methods: {
// 根据商品品类获取对应商品列表
getCategoryGoods(val) {
const param = {
isActive: 1,
isNeedExtendAttr: false,
isNeedImg: false,
};
categoryGoodsFind(param)
.then(res => {
++this.cascaderKey;
...
}
}
3、