element-ui 之采坑记录
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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);
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)