el-tree 一键展开/收起
22-06-10 16:06
字数 3210
阅读 2163
已编辑
Html
<el-dialog
title="区域库存设置"
:visible.sync="zoneVisible"
width="50%"
>
<div style="margin-bottom:20px;">
<el-input v-model="configData" clearable size="small" style="width: 200px;margin-right:20px;"
placeholder="请输入配置信息"></el-input>
<el-button type="primary" @click="setConfig" size="small">一键配置</el-button>
<el-button type="primary" @click="clearConfig" size="small">清空配置</el-button>
<el-button type="primary" @click="toggleRowExpansion" size="small">全部{{ isExpansion ? '收缩' : '展开' }}</el-button>
</div>
<div style="height:60vh;overflow-y:auto;">
<el-table
ref="topicTable"
:data="zoneData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="areaName"
label="省市"
>
</el-table-column>
<el-table-column
label="库存"
>
<template slot-scope="scope">
<input type="number" v-model="scope.row.stock"
style="height:35px;padding:0 5px;border:1px solid #eee;border-radius:5px;">
<!-- <el-input type="number" ></el-input> -->
</template>
</el-table-column>
</el-table>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="zoneVisible = false">取 消</el-button>
<el-button type="primary" @click="handleUpdateSaleArea">确 定</el-button>
</span>
</el-dialog>
setData() {
let tempData = this.zoneData;
console.log('this.zoneData', this.zoneData)
tempData.forEach(item => {
item.stock = this.configData ? this.configData : null;
if (item.children) {
item.children.forEach(item => {
item.stock = this.configData ? this.configData : null;
})
}
})
this.zoneData = tempData;
},
clearConfig() {
this.configData = null;
this.setData();
},
setConfig() {
if (!this.configData) {
return this.$message.error('请输入配置信息')
}
this.setData()
},
toggleRowExpansion() {
this.isExpansion = !this.isExpansion
this.toggleRowExpansion_forAll(this.zoneData, this.isExpansion);
},
toggleRowExpansion_forAll(data, isExpansion) {
data.forEach(item => {
this.$refs.topicTable.toggleRowExpansion(item, isExpansion);
if (item.children != undefined && item.children != null) {
this.toggleRowExpansion_forAll(item.children, isExpansion);
}
})
},
树形数据结构
[
{
"children": [
{
"Level": 2,
"areaId": 2,
"areaName": "市辖区",
"id": 2,
"label": "市辖区",
"stock": null,
"areaFullId": "1,2"
}
],
"Level": 1,
"areaId": 1,
"areaName": "北京市",
"id": 1,
"label": "北京市",
"stock": 1200,
"areaFullId": "1"
}]
1人点赞>
0 条评论
排序方式
时间
投票
快来抢占一楼吧
请登录后发表评论
相关推荐
最新文章
最受欢迎
22-07-04 07:41
22-06-13 09:08
22-06-10 16:06
22-02-21 21:39
22-02-19 16:36
3 评论
0 评论
0 评论
0 评论