feat: 回退至genTree
This commit is contained in:
parent
9538339d29
commit
239d8202ea
|
|
@ -8,46 +8,17 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="scTable"
|
||||
:style="{ height: _height }"
|
||||
ref="scTableMain"
|
||||
v-loading="loading"
|
||||
>
|
||||
<div class="scTable" :style="{ height: _height }" ref="scTableMain" v-loading="loading">
|
||||
<div class="scTable-table" :style="{ height: _table_height }">
|
||||
<el-table
|
||||
v-bind="$attrs"
|
||||
:data="tableData"
|
||||
:row-key="rowKey"
|
||||
:key="toggleIndex"
|
||||
ref="scTable"
|
||||
:height="height == 'auto' ? null : '100%'"
|
||||
:size="config.size"
|
||||
:border="config.border"
|
||||
:stripe="config.stripe"
|
||||
:summary-method="
|
||||
remoteSummary ? remoteSummaryMethod : summaryMethod
|
||||
"
|
||||
@sort-change="sortChange"
|
||||
@filter-change="filterChange"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable"
|
||||
:height="height == 'auto' ? null : '100%'" :size="config.size" :border="config.border" :stripe="config.stripe"
|
||||
:summary-method="remoteSummary ? remoteSummaryMethod : summaryMethod" @sort-change="sortChange"
|
||||
@filter-change="filterChange" @selection-change="selectionChange">
|
||||
<slot></slot>
|
||||
<template v-for="(item, index) in userColumn" :key="index">
|
||||
<el-table-column
|
||||
v-if="!item.hide"
|
||||
:column-key="item.prop"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
:width="item.width"
|
||||
:sortable="item.sortable"
|
||||
:fixed="item.fixed"
|
||||
:filters="item.filters"
|
||||
:filter-method="
|
||||
remoteFilter || !item.filters ? null : filterHandler
|
||||
"
|
||||
:show-overflow-tooltip="item.showOverflowTooltip"
|
||||
>
|
||||
<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop"
|
||||
:width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter || !item.filters ? null : filterHandler
|
||||
" :show-overflow-tooltip="item.showOverflowTooltip">
|
||||
<template #default="scope">
|
||||
<slot :name="item.prop" v-bind="scope">
|
||||
{{ scope.row[item.prop] }}
|
||||
|
|
@ -58,118 +29,47 @@
|
|||
<el-table-column min-width="1"></el-table-column>
|
||||
|
||||
<template #empty>
|
||||
<el-empty
|
||||
:description="emptyText"
|
||||
:image-size="100"
|
||||
></el-empty>
|
||||
<el-empty :description="emptyText" :image-size="100"></el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="scTable-page" v-if="!hidePagination || !hideDo">
|
||||
<div class="scTable-pagination">
|
||||
<el-pagination
|
||||
v-if="!hidePagination"
|
||||
background
|
||||
:small="true"
|
||||
:layout="paginationLayout"
|
||||
:total="total"
|
||||
:page-size="scPageSize"
|
||||
:page-sizes="pageSizes"
|
||||
v-model:currentPage="currentPage"
|
||||
@current-change="paginationChange"
|
||||
@update:page-size="pageSizeChange"
|
||||
></el-pagination>
|
||||
<el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total"
|
||||
:page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage"
|
||||
@current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
|
||||
</div>
|
||||
<div class="scTable-do" v-if="!hideDo">
|
||||
<span v-show="selectNum > 0"
|
||||
>已选择
|
||||
<span style="font-weight: bold">{{ selectNum }}</span>
|
||||
项</span
|
||||
>
|
||||
<el-button
|
||||
v-if="!hideRefresh"
|
||||
@click="refresh"
|
||||
icon="el-icon-refresh"
|
||||
circle
|
||||
style="margin-left: 15px"
|
||||
>
|
||||
<span v-show="selectNum>0">已选择 <span style="font-weight: bold">{{selectNum}}</span> 项</span>
|
||||
<el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left: 15px">
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="!hideRefresh"
|
||||
@click="reload"
|
||||
icon="el-icon-refresh-right"
|
||||
circle
|
||||
style="margin-left: 15px"
|
||||
>
|
||||
<el-button v-if="!hideRefresh" @click="reload" icon="el-icon-refresh-right" circle style="margin-left: 15px">
|
||||
</el-button>
|
||||
<el-popover
|
||||
v-if="column"
|
||||
placement="top"
|
||||
title="列设置"
|
||||
:width="500"
|
||||
trigger="click"
|
||||
:hide-after="0"
|
||||
@show="customColumnShow = true"
|
||||
@after-leave="customColumnShow = false"
|
||||
>
|
||||
<el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0"
|
||||
@show="customColumnShow = true" @after-leave="customColumnShow = false">
|
||||
|
||||
<template #reference>
|
||||
<el-button
|
||||
icon="el-icon-set-up"
|
||||
circle
|
||||
style="margin-left: 15px"
|
||||
></el-button>
|
||||
<el-button icon="el-icon-set-up" circle style="margin-left: 15px"></el-button>
|
||||
</template>
|
||||
<columnSetting
|
||||
v-if="customColumnShow"
|
||||
ref="columnSetting"
|
||||
@userChange="columnSettingChange"
|
||||
@save="columnSettingSave"
|
||||
@back="columnSettingBack"
|
||||
:column="userColumn"
|
||||
></columnSetting>
|
||||
<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange"
|
||||
@save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
|
||||
</el-popover>
|
||||
<el-popover
|
||||
v-if="!hideSetting"
|
||||
placement="top"
|
||||
title="表格设置"
|
||||
:width="400"
|
||||
trigger="click"
|
||||
:hide-after="0"
|
||||
>
|
||||
<el-popover v-if="!hideSetting" placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
|
||||
|
||||
<template #reference>
|
||||
<el-button
|
||||
icon="el-icon-setting"
|
||||
circle
|
||||
style="margin-left: 15px"
|
||||
></el-button>
|
||||
<el-button icon="el-icon-setting" circle style="margin-left: 15px"></el-button>
|
||||
</template>
|
||||
<el-form label-width="80px" label-position="left">
|
||||
<el-form-item label="表格尺寸">
|
||||
<el-radio-group
|
||||
v-model="config.size"
|
||||
size="small"
|
||||
@change="configSizeChange"
|
||||
>
|
||||
<el-radio-button label="large"
|
||||
>大</el-radio-button
|
||||
>
|
||||
<el-radio-button label="default"
|
||||
>正常</el-radio-button
|
||||
>
|
||||
<el-radio-button label="small"
|
||||
>小</el-radio-button
|
||||
>
|
||||
<el-radio-group v-model="config.size" size="small" @change="configSizeChange">
|
||||
<el-radio-button label="large">大</el-radio-button>
|
||||
<el-radio-button label="default">正常</el-radio-button>
|
||||
<el-radio-button label="small">小</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="样式">
|
||||
<el-checkbox
|
||||
v-model="config.border"
|
||||
label="纵向边框"
|
||||
></el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="config.stripe"
|
||||
label="斑马纹"
|
||||
></el-checkbox>
|
||||
<el-checkbox v-model="config.border" label="纵向边框"></el-checkbox>
|
||||
<el-checkbox v-model="config.stripe" label="斑马纹"></el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-popover>
|
||||
|
|
@ -190,9 +90,9 @@ export default {
|
|||
},
|
||||
props: {
|
||||
tableName: { type: String, default: "" },
|
||||
apiObj: { type: Object, default: () => {} },
|
||||
apiObj: { type: Object, default: () => { } },
|
||||
params: { type: Object, default: () => ({}) },
|
||||
data: { type: Object, default: () => {} },
|
||||
data: { type: Object, default: () => { } },
|
||||
height: { type: [String, Number], default: "100%" },
|
||||
size: { type: String, default: "default" },
|
||||
border: { type: Boolean, default: false },
|
||||
|
|
@ -206,7 +106,7 @@ export default {
|
|||
parseData: { type: Function, default: config.parseData },
|
||||
rowKey: { type: String, default: "" },
|
||||
summaryMethod: { type: Function, default: null },
|
||||
column: { type: Object, default: () => {} },
|
||||
column: { type: Object, default: () => { } },
|
||||
remoteSort: { type: Boolean, default: false },
|
||||
remoteFilter: { type: Boolean, default: false },
|
||||
remoteSummary: { type: Boolean, default: false },
|
||||
|
|
@ -229,14 +129,10 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
_height() {
|
||||
return Number(this.height)
|
||||
? Number(this.height) + "px"
|
||||
: this.height;
|
||||
return Number(this.height) ? Number(this.height) + "px" : this.height;
|
||||
},
|
||||
_table_height() {
|
||||
return this.hidePagination && this.hideDo
|
||||
? "100%"
|
||||
: "calc(100% - 50px)";
|
||||
return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)";
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
|
@ -261,7 +157,7 @@ export default {
|
|||
border: true,
|
||||
stripe: this.stripe,
|
||||
},
|
||||
selectNum: 0,
|
||||
selectNum: 0
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -276,29 +172,7 @@ export default {
|
|||
this.getData();
|
||||
} else if (this.data) {
|
||||
if (this.isTree) {
|
||||
let posts = [];
|
||||
this.data.forEach((item) => {
|
||||
let obj = new Object();
|
||||
obj = { ...item };
|
||||
obj.parentId = item.parent;
|
||||
obj.children = [];
|
||||
posts.push(obj);
|
||||
});
|
||||
for (let i = 0; i < posts.length; i++) {
|
||||
if (posts[i].parentId !== null) {
|
||||
for (let j = 0; j < posts.length; j++) {
|
||||
if (posts[j].id === posts[i].parentId) {
|
||||
posts[j].children.push(posts[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log("posts", posts);
|
||||
const lists = [...posts];
|
||||
console.log("lists", lists);
|
||||
this.tableData = lists.filter((list) => list.parentId === null);
|
||||
console.log("postsss", postsss);
|
||||
this.tableData = genTree(this.data);
|
||||
} else {
|
||||
this.tableData = this.data;
|
||||
}
|
||||
|
|
@ -336,7 +210,7 @@ export default {
|
|||
// delete reqData[config.request.page]
|
||||
// delete reqData[config.request.pageSize]
|
||||
}
|
||||
var c = Object.assign({}, this.tableParams, reqData);
|
||||
var c = Object.assign({}, this.tableParams, reqData)
|
||||
try {
|
||||
if (this.apiObj) {
|
||||
var res = await this.apiObj.req(c);
|
||||
|
|
@ -351,31 +225,7 @@ export default {
|
|||
dataList = response.rows;
|
||||
}
|
||||
if (this.isTree) {
|
||||
let posts = [];
|
||||
dataList.forEach((item) => {
|
||||
let obj = new Object();
|
||||
obj = { ...item };
|
||||
obj.parentId = item.parent;
|
||||
obj.children = [];
|
||||
posts.push(obj);
|
||||
});
|
||||
for (let i = 0; i < posts.length; i++) {
|
||||
if (posts[i].parentId !== null) {
|
||||
for (let j = 0; j < posts.length; j++) {
|
||||
if (posts[j].id === posts[i].parentId) {
|
||||
posts[j].children.push(posts[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log("posts", posts);
|
||||
const lists = [...posts];
|
||||
console.log("lists", lists);
|
||||
this.tableData = lists.filter(
|
||||
(list) => list.parentId === null
|
||||
);
|
||||
console.log("postsss", postsss);
|
||||
this.tableData = genTree(dataList);
|
||||
} else {
|
||||
this.tableData = dataList || [];
|
||||
}
|
||||
|
|
@ -388,6 +238,7 @@ export default {
|
|||
this.$emit("dataChange", res, this.tableData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
this.loading = false;
|
||||
if (error.response && error.response.data) {
|
||||
this.emptyText = error.response.data.err_msg;
|
||||
|
|
@ -397,28 +248,6 @@ export default {
|
|||
return false;
|
||||
}
|
||||
},
|
||||
redata(postList) {
|
||||
let posts = [];
|
||||
postList.forEach((item) => {
|
||||
let obj = new Object();
|
||||
obj = { ...item };
|
||||
obj.parentId = item.parent;
|
||||
posts.push(obj);
|
||||
});
|
||||
let obj = posts.reduce((res, v) => ((res[v.id] = v), res), {}); //Object
|
||||
let arr = [];
|
||||
for (let item of posts) {
|
||||
if (item.parentId == null) {
|
||||
arr.push(item);
|
||||
continue;
|
||||
}
|
||||
let parent = obj[item.parentId];
|
||||
parent.children = parent.children ? parent.children : [];
|
||||
parent.children.push(item);
|
||||
}
|
||||
console.log(arr);
|
||||
return arr;
|
||||
},
|
||||
//分页点击
|
||||
paginationChange() {
|
||||
this.getData();
|
||||
|
|
@ -513,7 +342,7 @@ export default {
|
|||
this.getData();
|
||||
},
|
||||
// select事件
|
||||
selectionChange(rows) {
|
||||
selectionChange(rows){
|
||||
this.selectNum = rows.length;
|
||||
},
|
||||
//本地过滤
|
||||
|
|
@ -631,8 +460,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scTable {
|
||||
}
|
||||
.scTable {}
|
||||
|
||||
.scTable-table {
|
||||
height: calc(100% - 50px);
|
||||
|
|
|
|||
Loading…
Reference in New Issue