任务页修改

src/views/contestDataManage/contestTaskManage/ContestTaskManage.vue

@@ -21,11 +21,14 @@
         :data="taskDta"
         node-key="id"
         default-expand-all
+        :props="defaultProps"
         :expand-on-click-node="false"
       >
-        <span slot-scope="{ node, data }" class="custom-tree-node">
-          <span>{{ node.label }}</span>
-          <span>
+        <div slot-scope="{ node, data }" class="custom-tree-node">
+          <div class="left-label" :title="node.label">
+            {{ node.label }}
+          </div>
+          <div class="right-button">
             <el-button
               type="text"
               size="mini"
@@ -55,8 +58,8 @@
             >
               任务绑定
             </el-button>
-          </span>
-        </span>
+          </div>
+        </div>
       </el-tree>
     </el-card>
     <add-edit-task ref="addEditTask" @reloadTaskTree="getTreeData" />
@@ -76,7 +79,13 @@ export default {
     },
     data() {
         return {
-            taskDta:[]
+            taskDta:[],
+            defaultProps: {
+                children: 'children',
+                label: 'name',
+                id: 'id',
+                parentId:'parentId'
+            }
         };
     },
     created() {
@@ -86,7 +95,7 @@ export default {
     methods: {
         getTreeData() {
             getTaskTreeDatas().then((res) => {
-                this.taskDta = this.transformTree(res.data);
+                this.taskDta = res.data;
             }).catch(error => {
                 this.$message.error(error.message);
             });
@@ -126,22 +135,6 @@ export default {
                         this.$message({ type: 'error', message: res.message });
                     }
                 });
-        },
-        transformTree(data) {
-            const result = [];
-            for (let i = 0; i < data.length; i++) {
-                const node = data[i];
-                const item = {
-                    id: node.id,
-                    label: node.name,
-                    parentId:node.parentId
-                };
-                if (node.children) {
-                    item.children = this.transformTree(node.children);
-                }
-                result.push(item);
-            }
-            return result;
         }
     }
 };
@@ -149,8 +142,9 @@ export default {
 
 <style lang="scss" scoped>
   .taskContainer{
-		width: 50%;
+		width: 70%;
 		margin: 0 auto;
+		overflow: hidden;
 		.taskTitle {
 			display: flex;
 			align-items: center;
@@ -158,12 +152,22 @@ export default {
 			padding: 10px;
 		}
 		.custom-tree-node {
-			flex: 1;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
+			width: 100%;
 			font-size: 16px;
 			padding-right: 20px;
+			.left-label{
+				flex: 1;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				cursor: pointer;
+			}
+			.right-button{
+				width:255px;
+			}
 		}
   }