Table 表格

参数说明类型可选值默认值 
resizable对应列是否可以通过拖动改变宽度(需要在 el-table 上设置 border 属性为真)booleantrue 
show-overflow-tooltip当内容过长被隐藏时显示 tooltipBooleanfalse 
 //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

参数说明类型可选默认值
targetLoading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串;若传入字符串,则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点object/stringdocument.body
body同 v-loading 指令中的 body 修饰符booleanfalse
fullscreen同 v-loading 指令中的 fullscreen 修饰符booleantrue
lock同 v-loading 指令中的 lock 修饰符booleanfalse
text显示在加载图标下方的加载文案string
spinner自定义加载图标类名string
background遮罩背景色string
customClassLoading 的自定义类名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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐