vue组件递归使用,废话少说直接看实列
1、效果
2、代码
2.1、父组件
<template>
<div>
<list-table
@editFunction="editFunction"
@addSubFunction="addSubFunction"
:list="list">
</list-table>
<br><br><br>
</div>
</template>
<script>
import listTable from "./list-table.vue";
export default {
components: {
listTable
},
data () {
return {
//表格数据
list: [],
}
},
computed: {
dict () {
return this.$store.state.dict.urlResourcesMange;
}
},
methods: {
//查询列表
search (page) {
var _this = this;
var res = {
"total": 0,
"data": [{
"createdBy": "0",
"creationDate": "2017-03-24 18:36:06",
"lastUpdatedBy": "0",
"lastUpdateDate": "2018-04-09 19:42:45",
"resourceId": "7",
"systemCode": "tms",
"code": "jcsz",
"name": "基础设置",
"url": "",
"type": "menu",
"orderSort": 0,
"all": 0,
"menuRouterUrl": "",
"menuIcon": "",
"status": "enable",
"children": [{
"createdBy": "0",
"creationDate": "2017-03-24 18:37:41",
"lastUpdatedBy": "0",
"lastUpdateDate": "2019-03-22 16:12:27",
"resourceId": "8",
"systemCode": "tms",
"code": "jcsz-spgl",
"name": "商品管理",
"url": "/api/goods/list",
"type": "menu",
"orderSort": 2,
"all": 1,
"menuRouterUrl": "/goods/list",
"menuIcon": "",
"status": "enable",
"children": [{
"createdBy": "0",
"creationDate": "2017-03-24 18:39:02",
"lastUpdatedBy": "0",
"lastUpdateDate": "2018-08-08 17:27:01",
"resourceId": "9",
"systemCode": "tms",
"code": "jcsz-bj",
"name": "编辑",
"description": "编辑(商品管理)",
"url": "/api/goods/update/{goodsId}",
"type": "api",
"orderSort": 0,
"all": 0,
"menuRouterUrl": "",
"menuIcon": "",
"status": "enable",
"children": [{
"createdBy": "0",
"creationDate": "2017-03-24 18:39:02",
"lastUpdatedBy": "0",
"lastUpdateDate": "2018-08-08 17:27:01",
"resourceId": "9",
"systemCode": "tms",
"code": "jcsz-bj",
"name": "编辑",
"description": "编辑(商品管理)",
"url": "/api/goods/update/{goodsId}",
"type": "api",
"orderSort": 0,
"all": 0,
"menuRouterUrl": "",
"menuIcon": "",
"status": "enable",
children: []
}],
"pid": "8"
}, {
"createdBy": "0",
"creationDate": "2017-03-24 18:39:57",
"lastUpdatedBy": "0",
"lastUpdateDate": "2018-07-04 09:56:04",
"resourceId": "10",
"systemCode": "tms",
"code": "jcsz-dr",
"name": "导入",
"description": "导入(商品管理)",
"url": "/api/goods/import",
"type": "api",
"orderSort": 0,
"all": 0,
"menuRouterUrl": "",
"menuIcon": "",
"status": "disable",
"children": [],
"pid": "8"
}, {
"createdBy": "0",
"creationDate": "2017-03-24 18:40:25",
"lastUpdatedBy": "0",
"lastUpdateDate": "2018-04-09 19:42:46",
"resourceId": "11",
"systemCode": "tms",
"code": "jcsz-dc",
"name": "导出",
"description": "导出(商品管理)",
"url": "/api/goods/export",
"type": "api",
"orderSort": 0,
"all": 0,
"menuRouterUrl": "",
"menuIcon": "",
"status": "enable",
"children": [],
"pid": "8"
}, {
"createdBy": "0",
"creationDate": "2018-03-21 17:59:05",
"lastUpdatedBy": "0",
"lastUpdateDate": "2018-04-09 19:43:24",
"resourceId": "1065",
"systemCode": "tms",
"code": "jcsz-spgl-szclx",
"name": "设置拆零箱",
"description": "设置拆零箱(基础设置-商品管理)",
"url": "/api/tms/box/insertOrUpdate",
"type": "api",
"orderSort": 0,
"all": 0,
"menuRouterUrl": "",
"menuIcon": "",
"status": "enable",
"children": [],
"pid": "8"
}, {
"createdBy": "0",
"creationDate": "2018-06-25 13:46:38",
"lastUpdatedBy": "0",
"lastUpdateDate": "2018-06-25 13:46:38",
"resourceId": "1662",
"systemCode": "tms",
"code": "jcsz-spgl-cjsq",
"name": "创建申请",
"description": "创建申请(基础设置-商品管理)",
"url": "/api/goods/importMaintenace",
"type": "api",
"orderSort": 0,
"all": 0,
"menuRouterUrl": "",
"menuIcon": "",
"status": "enable",
"children": [],
"pid": "8"
}],
"pid": "7"
}]
}],
"desc": "成功",
"code": "200"
};
_this.list = res.data;
},
//获取子组件事件
editFunction (data,type) {
console.log(data,type)
},
//获取子组件事件
addSubFunction (data,type) {
console.log(data,type)
},
},
created: function () {
var _this = this;
_this.search();
}
}
</script>
2.2 递归子组件:list-table.vue
<template>
<div class="list-item">
<el-table
class="mt10px"
:data="list"
border
:row-class-name="tableRowClassName"
style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<list-table
@editFunction="editFunction"
@addSubFunction="addSubFunction"
v-if="props.row.children.length > 0"
:list="props.row.children">
</list-table>
</template>
</el-table-column>
<el-table-column
label="序号"
width="65"
type="index"
align="center">
</el-table-column>
<el-table-column
label="名称"
prop="name">
</el-table-column>
<el-table-column
label="编码"
prop="code"
min-width="150px">
</el-table-column>
<el-table-column
label="描述"
prop="description">
</el-table-column>
<el-table-column
label="类型">
<template scope="scope">
{{dict.type[scope.row.type]}}
</template>
</el-table-column>
<el-table-column
label="排序"
prop="orderSort">
</el-table-column>
<el-table-column
label="状态">
<template scope="scope">
{{dict.status[scope.row.status]}}
</template>
</el-table-column>
<el-table-column
label="请求api"
prop="url"
min-width="200px">
</el-table-column>
<el-table-column
label="菜单路由"
prop="menuRouterUrl"
min-width="200px">
</el-table-column>
<el-table-column
label="操作"
width="220"
align="center">
<template scope="scope">
<el-button type="info" @click="editFunction(scope.row,'edit')">编辑</el-button>
<el-button type="warning" @click="changeStatus(scope.row.resourceId,scope.row)">
{{dict.status[scope.row.status]}}
</el-button>
<el-button type="success" @click="addSubFunction(scope.row,'addChild')">添加子资源</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "listTable",
props: {
list: Array
},
computed: {
dict () {
return this.$store.state.dict.urlResourcesMange;
}
},
methods: {
tableRowClassName({row, rowIndex}) {
if (row.children.length > 0) {
return 'url-resources-expand';
} else {
return 'url-resources-hide';
}
return '';
},
editFunction (row,type) {
this.$emit('editFunction', row,type);
},
addSubFunction (row,type) {
this.$emit('addSubFunction', row,type);
},
changeStatus(resourceId, row) {
var _this = this,
status = row.status == 'enable' ? 'disable' : 'enable',
statusStr = {
enable: '停用',
disable: '启用'
};
_this.$confirm('确认' + statusStr[row.status] + '? ', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(function () {
_this.$get({
url: '/api/manager/sysResource/status/' + resourceId + '/' + status,
success: function (res) {
_this.$message.success(statusStr[row.status] + '成功!');
row.status = status
}
});
}, function () {});
}
}
};
</script>
<style>
.url-resources-hide .el-table__expand-icon {
display: none !important;
}
</style>