feat: 回退至genTree

src/components/scTable/index.vue

@@ -8,46 +8,17 @@
 -->
 
 <template>
-	<div
+  <div class="scTable" :style="{ height: _height }" ref="scTableMain" v-loading="loading">
-		class="scTable"
-		:style="{ height: _height }"
-		ref="scTableMain"
-		v-loading="loading"
-	>
     <div class="scTable-table" :style="{ height: _table_height }">
-			<el-table
+      <el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable"
-				v-bind="$attrs"
+        :height="height == 'auto' ? null : '100%'" :size="config.size" :border="config.border" :stripe="config.stripe"
-				:data="tableData"
+        :summary-method="remoteSummary ? remoteSummaryMethod : summaryMethod" @sort-change="sortChange"
-				:row-key="rowKey"
+        @filter-change="filterChange" @selection-change="selectionChange">
-				: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
+          <el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop"
-						v-if="!item.hide"
+            :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter || !item.filters ? null : filterHandler
-						:column-key="item.prop"
+    " :show-overflow-tooltip="item.showOverflowTooltip">
-						: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
+          <el-empty :description="emptyText" :image-size="100"></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
+        <el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total"
-					v-if="!hidePagination"
+          :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage"
-					background
+          @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
-					: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 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 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
+        <el-button v-if="!hideRefresh" @click="reload" icon="el-icon-refresh-right" circle style="margin-left: 15px">
-					v-if="!hideRefresh"
-					@click="reload"
-					icon="el-icon-refresh-right"
-					circle
-					style="margin-left: 15px"
-				>
         </el-button>
-				<el-popover
+        <el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0"
-					v-if="column"
+          @show="customColumnShow = true" @after-leave="customColumnShow = false">
-					placement="top"
+
-					title="列设置"
-					:width="500"
-					trigger="click"
-					:hide-after="0"
-					@show="customColumnShow = true"
-					@after-leave="customColumnShow = false"
-				>
           <template #reference>
-						<el-button
+            <el-button icon="el-icon-set-up" circle style="margin-left: 15px"></el-button>
-							icon="el-icon-set-up"
-							circle
-							style="margin-left: 15px"
-						></el-button>
           </template>
-					<columnSetting
+          <columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange"
-						v-if="customColumnShow"
+            @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
-						ref="columnSetting"
-						@userChange="columnSettingChange"
-						@save="columnSettingSave"
-						@back="columnSettingBack"
-						:column="userColumn"
-					></columnSetting>
         </el-popover>
-				<el-popover
+        <el-popover v-if="!hideSetting" placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
-					v-if="!hideSetting"
+
-					placement="top"
-					title="表格设置"
-					:width="400"
-					trigger="click"
-					:hide-after="0"
-				>
           <template #reference>
-						<el-button
+            <el-button icon="el-icon-setting" circle style="margin-left: 15px"></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
+              <el-radio-group v-model="config.size" size="small" @change="configSizeChange">
-								v-model="config.size"
+                <el-radio-button label="large">大</el-radio-button>
-								size="small"
+                <el-radio-button label="default">正常</el-radio-button>
-								@change="configSizeChange"
+                <el-radio-button label="small">小</el-radio-button>
-							>
-								<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
+              <el-checkbox v-model="config.border" label="纵向边框"></el-checkbox>
-								v-model="config.border"
+              <el-checkbox v-model="config.stripe" label="斑马纹"></el-checkbox>
-								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)
+      return Number(this.height) ? Number(this.height) + "px" : this.height;
-				? Number(this.height) + "px"
-				: this.height;
     },
     _table_height() {
-			return this.hidePagination && this.hideDo
+      return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)";
-				? "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.tableData = genTree(this.data);
-				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);
       } 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 = [];
+            this.tableData = genTree(dataList);
-						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);
           } 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);