element-ui 之采坑记录

Table 表格

参数	说明	类型	可选值	默认值
resizable	对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）	boolean	—	true
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip	Boolean	—	false

 //resizable在column上传值，可设置此列禁止拖动
//show-overflow-tooltip在column上传值，可设置此列溢出hover时候显示tooltip
<el-table-column prop="address"  label="地址" :resizable='false' show-overflow-tooltip></el-table-column>

loading

vue项目在main.js里配置全局loading不能指定target

如需指定target可在每个页面中单独配置

如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 $loading，它的调用方式为：this.$loading(options)，同样会返回一个 Loading 实例。

页面内设置全部变量 const loading

发请求前：

loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });

请求成功

setTimeout(() => { loading.close(); }, 2000);

配置参数：Options

参数	说明	类型	可选	默认值
target	Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串;若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点	object/string	—	document.body
body	同 v-loading 指令中的 body 修饰符	boolean	—	false
fullscreen	同 v-loading 指令中的 fullscreen 修饰符	boolean	—	true
lock	同 v-loading 指令中的 lock 修饰符	boolean	—	false
text	显示在加载图标下方的加载文案	string	—	—
spinner	自定义加载图标类名	string	—	—
background	遮罩背景色	string	—	—
customClass	Loading 的自定义类名	string	—	—

el-tabs

打包后tab页padding值变化 实际上打包后多了一个类名 is-top；

tree

树形结构有全选情况

选中其他 全部取消勾选，点击全选清空其他选中

this.treeData.map((a,i)=>{
    if(i>0){
       this.$refs.tree.setChecked(i,false,true)//设置选中状态 （序号，是否勾选，子集是否设置）
    }
})

 

getCheckedNodes	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组	(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
setCheckedNodes	设置目前勾选的节点，使用此方法必须设置 node-key 属性	(nodes) 接收勾选节点数据的数组
getCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组	(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
setCheckedKeys	通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性	(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true则仅设置叶子节点的选中状态，默认值为 false
setChecked	通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性	(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false

let nodes = this.$refs.tree.getCheckedNodes();
    if(nodes.length==0){
        this.$refs.tree.setCheckedKeys([0])//无选中设置全部选中
        this.checkedList=[]
        this.tableData=[]
        this.totalPage=0
    }
    if(nodes[0]&&nodes[0].label=='全部人员'){
        nodes.splice(0,1)//去除全部选中
        this.$refs.tree.setCheckedNodes(nodes);
    }