代码拉取完成,页面将自动刷新
同步操作将从 smallwei/avue-doc 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
常用的树型组件 :::tip 2.5.3+ ::::
:::demo option
配置属性即可,data
为可配置项目,具体参考下表文档
<avue-tree :permission="getPermission" :loading="loading" :option="option" :data="data" @node-click="nodeClick" @update="update" @save="save" @del="del" v-model="form">
<span class="el-tree-node__label" slot-scope="{ node, data }">
<span>
<i class="el-icon-user-solid"></i>
{{ (node || {}).label }}
</span>
</span>
<template slot-scope="scope" slot="menu">
<div class="avue-tree__item" @click.native="tip(scope.node,scope.data)">自定义按钮</div>
</template>
</avue-tree>
<script>
export default {
data () {
return {
form:{},
loading:true,
data:[
{
value:0,
label:'一级部门',
children:[
{
value:1,
label:'一级部门1',
},{
value:2,
label:'一级部门2',
}
]
},{
value:3,
label:'二级部门',
children:[
{
value:4,
label:'二级部门1',
},{
value:5,
label:'二级部门2',
}
]
}
],
option:{
title:'我是标题',
filterText:"搜索关键字自定义",
defaultExpandAll:true,
formOption:{
labelWidth:100,
column:[{
label:'自定义项',
prop:'label'
}],
},
props:{
labelText:'标题',
label:'label',
value:'value',
children:'children'
}
}
}
},
mounted(){
setTimeout(()=>{
this.loading=false
},2000)
},
methods:{
getPermission(key, data) {
if (key == "addBtn"&&data.value==0) { return false; }
return true;
},
tip(node,data){
this.$message.success(JSON.stringify(data))
},
del(data,done){
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message.success('删除回调')
done();
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
update(parent,data,done,loading){
this.$message.success('更新回调')
done();
},
save(parent,data,done,loading){
this.$message.success('新增回调')
this.form.id = new Date().getTime();
this.form.value=new Date().getTime();
this.form.children=[];
done();
},
nodeClick(data){
this.$message.success(JSON.stringify(data))
},
filterNodeMethod(value,data){
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
}
}
</script>
:::
:::demo lazy
设置为true
即可,完后在treeLoad
函数里面处理逻辑,具体看下面例子
<avue-tree :option="option1" :filter-node-method="filterNodeMethod" @node-click="nodeClick" @update="update" @save="save" @del="del" v-model="form">
<template slot-scope="scope" slot="menu">
<div class="avue-tree__item" @click.native="tip(scope.node,scope.data)">自定义按钮</div>
</template>
</avue-tree>
<script>
export default {
data () {
return {
form:{},
option1:{
title:'我是标题',
formOption:{
labelWidth:100,
column:[{
label:'自定义项',
prop:'label'
}],
},
lazy: true,
treeLoad: function (node, resolve) {
if (node.level === 0) {
return resolve([{ is_show: true, label: 'region', value: new Date().getTime() }]);
}
if (node.level > 2) return resolve([]);
setTimeout(() => {
const data = [{
label: 'leaf',
is_show: true,
value: new Date().getTime(),
leaf: true
}, {
is_show: true,
value: new Date().getTime(),
label: 'zone'
}];
resolve(data);
}, 500);
},
props:{
labelText:'标题',
label:'label',
value:'value',
children:'children',
leaf:'leaf'
}
}
}
},
methods:{
tip(node,data){
this.$message.success(JSON.stringify(data))
},
del(data,done){
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message.success('删除回调')
done();
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
update(data,done,loading){
this.$message.success('更新回调')
done();
},
save(data,done,loading){
this.$message.success('新增回调')
this.form.id = new Date().getTime();
this.form.value=new Date().getTime();
this.form.children=[];
done();
},
nodeClick(data){
this.$message.success(JSON.stringify(data))
},
filterNodeMethod(value,data){
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
}
}
</script>
:::
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
option | 组件配置属性,详情见下面Option属性 | Object | — | — |
data | 存放结构体的数据 | Array | — | — |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
defaultExpandAll | 是否展开节点 | Boolean | false / true | false |
dialogWidth | 弹出框宽度 | String | - | 50% |
formOption | 自定义form表单,具体参考avue-form组件(默认自带一个标题的column,可以根据配置去修改) | Object | - | - |
menu | 菜单栏 | Boolean | false / true | true |
addBtn | 新增按钮 | Boolean | false / true | true |
editBtn | 编辑按钮 | Boolean | false / true | true |
delBtn | 修改按钮 | Boolean | false / true | true |
props | 配置选项,具体看下表 | object | - | - |
filter | 是否显示搜索框 | Boolean | false / true | true |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 节点的名称 | String | - | - |
value | 节点的值 | String | - | - |
id | 节点主键 | String | - | - |
children | 子节点 | Array | - | - |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 指定节点标签为节点对象的某个属性值 | string | — | — |
labelText | 弹窗添加节点的名称 | String | - | 名称 |
children | 指定子树为节点对象的某个属性值 | string | — | — |
value | 指定节点选择框的值也作为节点的nodeKey | boolean | — | — |
事件名 | 说明 | 参数 |
---|---|---|
save | 新增节点回调 | parent, data, done,loading |
update | 修改节点回调 | parent, data, done,loading |
del | 删除节点回调 | data, done |
name | 说明 |
---|---|
menuBtn | 按钮的卡槽 |
addBtn | 新增按钮卡槽 |
- | 节点卡槽 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。