vue+element tree组件 点击按钮获取树 按钮名字随点击树内容动态改变
效果图如下:点击按钮后思路:1、首先填报单位右侧的是一个按钮,点击这个按钮之后会触发一个dialog,这里命名的是<el-button @click="visiblePopover = true">{{ back }}</el-button>然后在dialog的代码里有一行:visible.sync="visiblePopover"这里加.sync就是可以个性化命名这个vi
·
效果图如下:
点击按钮后
思路:
1、首先填报单位右侧的是一个按钮,点击这个按钮之后会触发一个dialog,这里命名写的是{{back}}
<el-button @click="visiblePopover = true">{{ back }}</el-button>
然后在dialog的代码里有一行
:visible.sync="visiblePopover"
这里加.sync就是可以个性化命名这个visible,然后打开这个dialog后会有一个树组件
<el-form-item label="填报单位" prop="org">
<el-dialog
width="30%"
append-to-body
title="选择区域"
:visible.sync="visiblePopover"
>
<el-tree
:data="orgNoOptions"
:props="orgListTreeProps"
node-key="orgNo"
ref="orgListTree"
@current-change="orgListTreeCurrentChangeHandle"
default-expand-all //是否默认展开所有节点
:expand-on-click-node="false"
//是否在点击节点的时候展开或者收缩节点,
默认值为 true,如果为 false,则只有点箭头
图标的时候才会展开或者收缩节点。
>
</el-tree>
</el-dialog>
<!-- <el-button @click="visiblePopover = true">{{
searchForm.orgName || '点击选择所属机构'
}}</el-button> -->
<el-button @click="visiblePopover = true">{{ back }}</el-button>
<!-- </el-form-item> -->
</el-form-item>
orgNoOptions和orgListTreeProps都在data里声明了。
node-key您参考官方文档
在我这个例子中的node-key是orgNo
注:这里的treeDataTranslate方法写在这篇博客里了,可参考。
然后您还记得这个按钮叫什么名字吗?在data中先声明的变量,随便叫什么名字都可以.
back: '凤凰街附近和',
<script>{
import TableTreeColumn from '@/components/table-tree-column'
export default {
data () {
return {
searchForm: {
orgNo: '',
orgName: '',
org: '',
closetime: '',
status: '',
startTime: '',
endTime: '',
},
disabled: true,
back: '凤凰街附近和',
dataList: [],
initDataList: [], // list接口返回原始数据
orgNoOptions: this.treeDataTranslate(JSON.parse(sessionStorage.getItem('orgList') || '[]'), 'orgNo', 'parentNo'),
orgListTreeProps: {
label: 'orgName',
children: 'children'
},
visible: false,
visiblePopover: false,
statusList: [],
dataListSelections: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
}
},
methods{
//机构树点击事件
orgListTreeCurrentChangeHandle (data) {
console.log(data,888888888888);
this.searchForm.org = data.orgNo
this.searchForm.orgName = data.orgName
this.back = data.orgName
// this.searchForm.org = data.orgName
this.visiblePopover = false
},
}
}
}
这里机构树里的点击事件里的data是什么,我打印出来,如下。
但是您还记得最初始的按钮状态吗?是这样的
我们在页面一加载时候就先获取数据
activated () {
this.getDataList()
},
然后看这里面的this.back="点击选择所属机构"
// 获取数据列表
getDataList () {
let that = this;
// 先注释掉请求,用假数据调试先
// this.dataList = this.treeDataTranslate(data.menuList, '', 'parentId', 'childrens')
// console.log('this.dataList', this.dataList)
this.$http({
url: '/task/info/list',
method: 'get',
params: {
'page': this.pageIndex,
'limit': this.pageSize,
'org': this.searchForm.org,
'year': this.searchForm.year,
'status': this.searchForm.status,
'startTime': this.searchForm.startTime,
'endTime': this.searchForm.endTime,
}
}).then(({ data }) => {
// console.log(data);
// that.dataList = that.treeDataTranslate(data.page.records, 'id', 'pid', 'childrens')
if (data && data.code === 0) {
// this.dataList = data.page.records
//initialDataList:list接口返回原始数据
that.initDataList = data.page;
that.dataList = that.treeDataTranslate(data.page, 'id', 'parentId', 'childrens')
// this.totalPage = data.page.total
this.back = '点击选择所属机构'
} else {
this.dataList = []
this.totalPage = 0
}
})
},
如果您在activated把方法注释掉
按钮就会变回原来在data中写的文字
更多推荐
已为社区贡献5条内容
所有评论(0)