diff --git a/frontend/src/business/components/functional/plan/FunctionalTestPlan.vue b/frontend/src/business/components/functional/plan/FunctionalTestPlan.vue
index e46127158a..edfa6d7252 100644
--- a/frontend/src/business/components/functional/plan/FunctionalTestPlan.vue
+++ b/frontend/src/business/components/functional/plan/FunctionalTestPlan.vue
@@ -34,21 +34,21 @@
           <el-table-column
             width="250"
             :label="$t('commons.create_time')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span>{{ scope.row.createTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
             width="250"
             :label="$t('commons.update_time')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
             width="150"
             :label="$t('commons.operating')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
               <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
             </template>
diff --git a/frontend/src/business/components/functional/plan/components/FunctionalTestSceneConfig.vue b/frontend/src/business/components/functional/plan/components/FunctionalTestSceneConfig.vue
index 0eac63a34a..b6aaf92d58 100644
--- a/frontend/src/business/components/functional/plan/components/FunctionalTestSceneConfig.vue
+++ b/frontend/src/business/components/functional/plan/components/FunctionalTestSceneConfig.vue
@@ -30,7 +30,7 @@
       </el-table-column>
       <el-table-column
         :label="$t('load_test.last_modify_time')">
-        <template slot-scope="scope">
+        <template v-slot:default="scope">
           <i class="el-icon-time"/>
           <span class="last-modified">{{ scope.row.lastModified | timestampFormatDate }}</span>
         </template>
@@ -41,7 +41,7 @@
       </el-table-column>
       <el-table-column
         :label="$t('commons.operating')">
-        <template slot-scope="scope">
+        <template v-slot:default="scope">
           <el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id" type="primary" icon="el-icon-download"
                      size="mini" circle/>
           <el-button @click="handleDelete(scope.row, scope.$index)" type="danger" icon="el-icon-delete" size="mini"
diff --git a/frontend/src/business/components/functional/report/FunctionalTestReport.vue b/frontend/src/business/components/functional/report/FunctionalTestReport.vue
index b6f5e7657e..b2cf586930 100644
--- a/frontend/src/business/components/functional/report/FunctionalTestReport.vue
+++ b/frontend/src/business/components/functional/report/FunctionalTestReport.vue
@@ -36,21 +36,21 @@
           <el-table-column
             width="250"
             :label="$t('commons.create_time')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span>{{ scope.row.createTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
             width="250"
             :label="$t('commons.update_time')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
             width="150"
             :label="$t('commons.operating')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
               <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
             </template>
diff --git a/frontend/src/business/components/performance/plan/PerformanceTestPlan.vue b/frontend/src/business/components/performance/plan/PerformanceTestPlan.vue
index b4e6778bf5..6cd2c6dcd7 100644
--- a/frontend/src/business/components/performance/plan/PerformanceTestPlan.vue
+++ b/frontend/src/business/components/performance/plan/PerformanceTestPlan.vue
@@ -34,21 +34,21 @@
           <el-table-column
             width="250"
             :label="$t('commons.create_time')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span>{{ scope.row.createTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
             width="250"
             :label="$t('commons.update_time')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
             width="150"
             :label="$t('commons.operating')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
               <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
             </template>
diff --git a/frontend/src/business/components/performance/plan/components/PerformanceAdvancedConfig.vue b/frontend/src/business/components/performance/plan/components/PerformanceAdvancedConfig.vue
index 33ffa1cac9..060ac1c470 100644
--- a/frontend/src/business/components/performance/plan/components/PerformanceAdvancedConfig.vue
+++ b/frontend/src/business/components/performance/plan/components/PerformanceAdvancedConfig.vue
@@ -15,7 +15,7 @@
         <el-table-column
           :label="$t('load_test.domain')"
           show-overflow-tooltip>
-          <template slot-scope="{row}">
+          <template v-slot:default="{row}">
             <template v-if="row.edit">
               <el-input v-model="row.domain" class="edit-input" size="mini"/>
             </template>
@@ -25,7 +25,7 @@
         <el-table-column
           :label="$t('load_test.enable')"
           show-overflow-tooltip>
-          <template slot-scope="{row}">
+          <template v-slot:default="{row}">
             <el-switch
               :disabled="!row.edit"
               size="mini"
@@ -38,7 +38,7 @@
         <el-table-column
           :label="$t('load_test.ip')"
           show-overflow-tooltip>
-          <template slot-scope="{row}">
+          <template v-slot:default="{row}">
             <template v-if="row.edit">
               <el-input v-model="row.ip" class="edit-input" size="mini"/>
             </template>
@@ -46,7 +46,7 @@
           </template>
         </el-table-column>
         <el-table-column align="center">
-          <template slot-scope="{row, $index}">
+          <template v-slot:default="{row, $index}">
             <template v-if="row.edit">
               <el-button
                 class="cancel-btn"
@@ -99,7 +99,7 @@
         <el-table-column
           :label="$t('load_test.param_name')"
           show-overflow-tooltip>
-          <template slot-scope="{row}">
+          <template v-slot:default="{row}">
             <template v-if="row.edit">
               <el-input v-model="row.name" class="edit-input" size="mini"/>
             </template>
@@ -109,7 +109,7 @@
         <el-table-column
           :label="$t('load_test.enable')"
           show-overflow-tooltip>
-          <template slot-scope="{row}">
+          <template v-slot:default="{row}">
             <el-switch
               :disabled="!row.edit"
               size="mini"
@@ -122,7 +122,7 @@
         <el-table-column
           :label="$t('load_test.param_value')"
           show-overflow-tooltip>
-          <template slot-scope="{row}">
+          <template v-slot:default="{row}">
             <template v-if="row.edit">
               <el-input v-model="row.value" class="edit-input" size="mini"/>
             </template>
@@ -130,7 +130,7 @@
           </template>
         </el-table-column>
         <el-table-column align="center">
-          <template slot-scope="{row, $index}">
+          <template v-slot:default="{row, $index}">
             <template v-if="row.edit">
               <el-button
                 class="cancel-btn"
diff --git a/frontend/src/business/components/performance/plan/components/PerformanceBasicConfig.vue b/frontend/src/business/components/performance/plan/components/PerformanceBasicConfig.vue
index 45f3ac890f..dce5d7a9ab 100644
--- a/frontend/src/business/components/performance/plan/components/PerformanceBasicConfig.vue
+++ b/frontend/src/business/components/performance/plan/components/PerformanceBasicConfig.vue
@@ -31,14 +31,14 @@
       </el-table-column>
       <el-table-column
         :label="$t('load_test.last_modify_time')">
-        <template slot-scope="scope">
+        <template v-slot:default="scope">
           <i class="el-icon-time"/>
           <span class="last-modified">{{ scope.row.updateTime | timestampFormatDate }}</span>
         </template>
       </el-table-column>
       <el-table-column
         :label="$t('commons.operating')">
-        <template slot-scope="scope">
+        <template v-slot:default="scope">
           <el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id" type="primary" icon="el-icon-download"
                      size="mini" circle/>
           <el-button @click="handleDelete(scope.row, scope.$index)" type="danger" icon="el-icon-delete" size="mini"
diff --git a/frontend/src/business/components/performance/report/PerformanceTestReport.vue b/frontend/src/business/components/performance/report/PerformanceTestReport.vue
index 2a952b0116..58ff6d97c5 100644
--- a/frontend/src/business/components/performance/report/PerformanceTestReport.vue
+++ b/frontend/src/business/components/performance/report/PerformanceTestReport.vue
@@ -30,21 +30,21 @@
           <el-table-column
             width="250"
             :label="$t('commons.create_time')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span>{{ scope.row.createTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
             width="250"
             :label="$t('commons.update_time')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
             prop="status"
             :label="$t('commons.status')">
-            <template slot-scope="{row}">
+            <template v-slot:default="{row}">
               <el-tag size="mini" type="primary" v-if="row.status === 'Starting'">
                 {{ row.status }}
               </el-tag>
@@ -65,7 +65,7 @@
           <el-table-column
             width="150"
             :label="$t('commons.operating')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
               <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
             </template>
diff --git a/frontend/src/business/components/project/MsProject.vue b/frontend/src/business/components/project/MsProject.vue
index 839185517c..6885a002d5 100644
--- a/frontend/src/business/components/project/MsProject.vue
+++ b/frontend/src/business/components/project/MsProject.vue
@@ -20,7 +20,7 @@
           <el-table-column prop="description" :label="$t('commons.description')"/>
           <el-table-column prop="workspaceName" label="所属工作空间"/>
           <el-table-column>
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
               <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
             </template>
@@ -65,7 +65,7 @@
 <script>
   import MsCreateBox from "../settings/CreateBox";
   import {Message} from "element-ui";
-  import {TokenKey,CURRENT_PROJECT} from "../../../common/constants";
+  import {CURRENT_PROJECT, TokenKey} from "../../../common/constants";
 
   export default {
     name: "MsProject",
diff --git a/frontend/src/business/components/settings/organization/OrganizationMember.vue b/frontend/src/business/components/settings/organization/OrganizationMember.vue
index 8f9121ba33..42255d09d9 100644
--- a/frontend/src/business/components/settings/organization/OrganizationMember.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationMember.vue
@@ -18,14 +18,14 @@
         <el-table-column prop="email" :label="$t('commons.email')"/>
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column prop="roles" :label="$t('commons.role')" width="140">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark">
               {{ role.name }}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column>
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
diff --git a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
index 7bed5e31f1..5198e4ae5c 100644
--- a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
@@ -17,12 +17,12 @@
         <el-table-column prop="name" :label="$t('commons.name')"/>
         <el-table-column prop="description" :label="$t('commons.description')"/>
         <el-table-column :label="$t('commons.member')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button type="text" class="member-size" @click="cellClick(scope.row)">{{scope.row.memberSize}}</el-button>
           </template>
         </el-table-column>
         <el-table-column>
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
@@ -80,14 +80,14 @@
         <el-table-column prop="email" :label="$t('commons.email')"/>
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column :label="$t('commons.role')" width="120">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark" type="success">
               {{ role.name }}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="editMember(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="delMember(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
diff --git a/frontend/src/business/components/settings/personal/PersonSetting.vue b/frontend/src/business/components/settings/personal/PersonSetting.vue
index 092459f8ec..bafc15dea4 100644
--- a/frontend/src/business/components/settings/personal/PersonSetting.vue
+++ b/frontend/src/business/components/settings/personal/PersonSetting.vue
@@ -14,12 +14,12 @@
         <el-table-column prop="email" :label="$t('commons.email')"/>
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column prop="createTime" :label="$t('commons.create_time')" width="180">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span>{{ scope.row.createTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
           </template>
         </el-table-column>
diff --git a/frontend/src/business/components/settings/system/Organization.vue b/frontend/src/business/components/settings/system/Organization.vue
index 59e418897a..02eca1ef85 100644
--- a/frontend/src/business/components/settings/system/Organization.vue
+++ b/frontend/src/business/components/settings/system/Organization.vue
@@ -19,12 +19,12 @@
         <el-table-column prop="name" :label="$t('commons.name')"/>
         <el-table-column prop="description" :label="$t('commons.description')"/>
         <el-table-column :label="$t('commons.member')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button type="text" class="member-size" @click="cellClick(scope.row)">{{scope.row.memberSize}}</el-button>
           </template>
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
@@ -67,14 +67,14 @@
         <el-table-column prop="email" :label="$t('commons.email')"/>
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column :label="$t('commons.role')" width="140">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark">
               {{ role.name }}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="editMember(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="delMember(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
diff --git a/frontend/src/business/components/settings/system/SystemWorkspace.vue b/frontend/src/business/components/settings/system/SystemWorkspace.vue
index 1759e0ab04..3309001d4a 100644
--- a/frontend/src/business/components/settings/system/SystemWorkspace.vue
+++ b/frontend/src/business/components/settings/system/SystemWorkspace.vue
@@ -21,12 +21,12 @@
         <el-table-column prop="description" :label="$t('commons.description')"/>
         <el-table-column prop="organizationName" :label="$t('workspace.organization_name')"/>
         <el-table-column :label="$t('commons.member')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button type="text" class="member-size" @click="cellClick(scope.row)">{{scope.row.memberSize}}</el-button>
           </template>
         </el-table-column>
         <el-table-column>
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
@@ -120,14 +120,14 @@
         <el-table-column prop="email" :label="$t('commons.email')"/>
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column :label="$t('commons.role')" width="120">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark" type="success">
               {{ role.name }}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="editMember(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="delMember(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
diff --git a/frontend/src/business/components/settings/system/TestResourcePool.vue b/frontend/src/business/components/settings/system/TestResourcePool.vue
index 3d4ba560e1..02ac579aca 100644
--- a/frontend/src/business/components/settings/system/TestResourcePool.vue
+++ b/frontend/src/business/components/settings/system/TestResourcePool.vue
@@ -17,13 +17,13 @@
         <el-table-column prop="name" label="名称"/>
         <el-table-column prop="description" label="描述"/>
         <el-table-column prop="type" label="类型">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span v-if="scope.row.type === 'NODE'">独立节点</span>
             <span v-if="scope.row.type === 'K8S'">Kubernetes</span>
           </template>
         </el-table-column>
         <el-table-column prop="status" label="启用/禁用">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-switch v-model="scope.row.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
@@ -34,17 +34,17 @@
           </template>
         </el-table-column>
         <el-table-column prop="createTime" label="创建时间" width="180">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span>{{ scope.row.createTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="updateTime" label="更新时间" width="180">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
         <el-table-column>
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
diff --git a/frontend/src/business/components/settings/system/User.vue b/frontend/src/business/components/settings/system/User.vue
index 18c7461a35..0d1ca419b3 100644
--- a/frontend/src/business/components/settings/system/User.vue
+++ b/frontend/src/business/components/settings/system/User.vue
@@ -21,7 +21,7 @@
         <el-table-column prop="email" :label="$t('commons.email')"/>
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column prop="status" :label="$t('commons.status')" width="100">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-switch v-model="scope.row.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
@@ -32,12 +32,12 @@
           </template>
         </el-table-column>
         <el-table-column prop="createTime" :label="$t('commons.create_time')" width="180">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span>{{ scope.row.createTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index 2edf45f73f..48c7bbc2cd 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@@ -17,14 +17,14 @@
         <el-table-column prop="email" :label="$t('commons.email')"/>
         <el-table-column prop="phone" :label="$t('commons.phone')"/>
         <el-table-column prop="roles" label="角色" width="120">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark" type="success">
               {{ role.name }}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column>
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle v-permission="['test_manager']"/>
             <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle v-permission="['test_manager']"/>
           </template>
diff --git a/frontend/src/business/components/track/case/components/NodeTree.vue b/frontend/src/business/components/track/case/components/NodeTree.vue
index bdf51a6429..a68175c697 100644
--- a/frontend/src/business/components/track/case/components/NodeTree.vue
+++ b/frontend/src/business/components/track/case/components/NodeTree.vue
@@ -7,47 +7,47 @@
     </el-input>
 
     <el-tree
-        class="filter-tree node-tree"
-        :data="treeNodes"
-        node-key="id"
-        @node-drag-end="handleDragEnd"
-        :filter-node-method="filterNode"
-        :expand-on-click-node="false"
-        draggable
-        ref="tree">
+      class="filter-tree node-tree"
+      :data="treeNodes"
+      node-key="id"
+      @node-drag-end="handleDragEnd"
+      :filter-node-method="filterNode"
+      :expand-on-click-node="false"
+      draggable
+      ref="tree">
 
-      <span class="custom-tree-node father" slot-scope="{ node, data }" @click="selectNode(node)">
-          <span>{{node.label}}</span>
-          <el-dropdown class="node-dropdown child">
+      <template class="custom-tree-node father" v-slot:default="{ node, data }" @click="selectNode(node)">
+        <span>{{node.label}}</span>
+        <el-dropdown class="node-dropdown child">
             <span class="el-dropdown-link">
               <i class="el-icon-folder-add"></i>
             </span>
-            <el-dropdown-menu slot="dropdown">
+          <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>
               <div @click="openEditNodeDialog('edit', data)">{{$t('test_track.rename')}}</div>
             </el-dropdown-item>
-            <el-dropdown-item >
+            <el-dropdown-item>
               <div @click="openEditNodeDialog('add', data)">{{$t('test_track.add_submodule')}}</div>
             </el-dropdown-item>
             <el-dropdown-item>
               <div @click="remove(node, data)">{{$t('commons.delete')}}</div>
             </el-dropdown-item>
           </el-dropdown-menu>
-          </el-dropdown>
-        </span>
+        </el-dropdown>
+      </template>
     </el-tree>
 
     <el-dialog :title="$t('test_track.add_module')" :visible.sync="dialogFormVisible" width="500px">
 
-        <el-row type="flex" justify="center">
-          <el-col :span="18">
-            <el-form :model="form">
-              <el-form-item :label="$t('test_track.module_name')" :label-width="formLabelWidth">
-                <el-input v-model="form.name" autocomplete="off"></el-input>
-              </el-form-item>
-            </el-form>
-          </el-col>
-        </el-row>
+      <el-row type="flex" justify="center">
+        <el-col :span="18">
+          <el-form :model="form">
+            <el-form-item :label="$t('test_track.module_name')" :label-width="formLabelWidth">
+              <el-input v-model="form.name" autocomplete="off"></el-input>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
 
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">{{$t('test_track.cancel')}}</el-button>
@@ -63,146 +63,147 @@
 
   import {CURRENT_PROJECT} from '../../../../../common/constants';
 
-    export default {
-      name: "NodeTree",
-      data() {
-        return {
-          filterText: '',
-          defaultProps: {
-            children: 'children',
-            label: 'label'
-          },
-          form: {
-            name: '',
-          },
-          formLabelWidth: '80px',
-          dialogTableVisible: false,
-          dialogFormVisible: false,
-          editType: '',
-          editData: {},
-          treeNodes: [],
-          defaultKeys: []
-        };
+  export default {
+    name: "NodeTree",
+    data() {
+      return {
+        filterText: '',
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        },
+        form: {
+          name: '',
+        },
+        formLabelWidth: '80px',
+        dialogTableVisible: false,
+        dialogFormVisible: false,
+        editType: '',
+        editData: {},
+        treeNodes: [],
+        defaultKeys: []
+      };
+    },
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      }
+    },
+    created() {
+      this.getNodeTree();
+    },
+    methods: {
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        let param = {};
+        param.id = draggingNode.data.id;
+        if (dropType === 'inner') {
+          param.pId = dropNode.data.id;
+          param.level = dropNode.data.level + 1;
+        } else {
+          if (dropNode.parent.id === 0) {
+            param.pId = 0;
+            param.level = 1;
+          } else {
+            param.pId = dropNode.parent.data.id;
+            param.level = dropNode.parent.data.level + 1;
+          }
+        }
+        this.$post('/case/node/edit', param);
       },
-      watch: {
-        filterText(val) {
-          this.$refs.tree.filter(val);
+      remove(node, data) {
+        this.$alert(this.$t('test_track.delete_module_confirm') + data.label + "，" +
+          this.$t('test_track.delete_module_resource') + "？", '', {
+          confirmButtonText: this.$t('commons.confirm'),
+          callback: (action) => {
+            if (action === 'confirm') {
+              let nodeIds = [];
+              this.getChildNodeId(node, nodeIds);
+              this.$post("/case/node/delete", nodeIds, () => {
+                const parent = node.parent;
+                const children = parent.data.children || parent.data;
+                const index = children.findIndex(d => d.id === data.id);
+                children.splice(index, 1);
+                this.$emit("refresh");
+              });
+            }
+          }
+        });
+      },
+      selectNode(node) {
+        let nodeIds = [];
+        this.getChildNodeId(node, nodeIds);
+        this.$emit("nodeSelectEvent", nodeIds);
+      },
+      getChildNodeId(rootNode, nodeIds) {
+        //递归获取所有子节点ID
+        nodeIds.push(rootNode.data.id);
+        for (let i = 0; i < rootNode.childNodes.length; i++) {
+          this.getChildNodeId(rootNode.childNodes[i], nodeIds);
+        }
+        return nodeIds;
+      },
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+      },
+      editNode() {
+        this.saveNode(this.editType, this.editData);
+        this.dialogFormVisible = false;
+      },
+      openEditNodeDialog(type, data) {
+        this.editType = type;
+        this.editData = data;
+        this.dialogFormVisible = true;
+      },
+      getNodeTree() {
+        if (localStorage.getItem(CURRENT_PROJECT)) {
+          let projectId = JSON.parse(localStorage.getItem(CURRENT_PROJECT)).id;
+          this.$get("/case/node/list/" + projectId, response => {
+            this.treeNodes = response.data;
+          });
         }
       },
-      created() {
-        this.getNodeTree();
-      },
-      methods: {
-        handleDragEnd(draggingNode, dropNode, dropType, ev) {
-          let param = {};
-          param.id = draggingNode.data.id;
-          if(dropType === 'inner'){
-            param.pId = dropNode.data.id;
-            param.level = dropNode.data.level + 1;
-          } else {
-            if(dropNode.parent.id === 0){
-              param.pId = 0;
-              param.level = 1;
+      saveNode(type, pNode) {
+        let param = {};
+        let url = '';
+
+        if (type === 'add') {
+          url = '/case/node/add';
+          param.level = 1;
+          if (pNode) {
+            //非根节点
+            param.pId = pNode.id;
+            param.level = pNode.level + 1;
+          }
+        } else if (type === 'edit') {
+          url = '/case/node/edit';
+          param.id = this.editData.id
+        }
+
+        param.name = this.form.name;
+        param.label = this.form.name;
+
+        if (localStorage.getItem(CURRENT_PROJECT)) {
+          param.projectId = JSON.parse(localStorage.getItem(CURRENT_PROJECT)).id;
+        }
+
+        this.$post(url, param, response => {
+          if (type === 'edit') {
+            this.editData.label = param.label;
+          }
+          if (type === 'add') {
+            param.id = response.data;
+            if (pNode) {
+              this.$refs.tree.append(param, pNode);
             } else {
-              param.pId = dropNode.parent.data.id;
-              param.level = dropNode.parent.data.level + 1;
+              this.treeNodes.push(param);
             }
           }
-          this.$post('/case/node/edit', param);
-        },
-        remove(node, data) {
-          this.$alert(this.$t('test_track.delete_module_confirm') + data.label + "，" +
-            this.$t('test_track.delete_module_resource') + "？", '', {
-            confirmButtonText: this.$t('commons.confirm'),
-            callback: (action) => {
-              if (action === 'confirm') {
-                let nodeIds = [];
-                this.getChildNodeId(node, nodeIds);
-                this.$post("/case/node/delete", nodeIds, () => {
-                  const parent = node.parent;
-                  const children = parent.data.children || parent.data;
-                  const index = children.findIndex(d => d.id === data.id);
-                  children.splice(index, 1);
-                  this.$emit("refresh");
-                });
-              }
-            }
-          });
-        },
-        selectNode(node) {
-          let nodeIds = [];
-          this.getChildNodeId(node, nodeIds);
-          this.$emit("nodeSelectEvent", nodeIds);
-        },
-        getChildNodeId(rootNode, nodeIds) {
-          //递归获取所有子节点ID
-          nodeIds.push(rootNode.data.id);
-          for (let i = 0; i < rootNode.childNodes.length; i++){
-            this.getChildNodeId(rootNode.childNodes[i], nodeIds);
-          }
-          return nodeIds;
-        },
-        filterNode(value, data) {
-          if (!value) return true;
-          return data.label.indexOf(value) !== -1;
-        },
-        editNode() {
-          this.saveNode(this.editType, this.editData);
-          this.dialogFormVisible = false;
-        },
-        openEditNodeDialog(type, data) {
-          this.editType = type;
-          this.editData = data;
-          this.dialogFormVisible = true;
-        },
-        getNodeTree() {
-          if(localStorage.getItem(CURRENT_PROJECT)) {
-            let projectId = JSON.parse(localStorage.getItem(CURRENT_PROJECT)).id;
-            this.$get("/case/node/list/" + projectId, response => {
-              this.treeNodes = response.data;
-            });
-          }
-        },
-        saveNode(type, pNode) {
-          let param = {};
-          let url = '';
-
-          if(type === 'add'){
-            url = '/case/node/add';
-            param.level = 1;
-            if(pNode){
-              //非根节点
-              param.pId = pNode.id;
-              param.level = pNode.level + 1;
-            }
-          } else if(type === 'edit'){
-            url = '/case/node/edit';
-            param.id = this.editData.id
-          }
-
-          param.name = this.form.name;
-          param.label = this.form.name;
-
-          if(localStorage.getItem(CURRENT_PROJECT)) {
-            param.projectId = JSON.parse(localStorage.getItem(CURRENT_PROJECT)).id;
-          }
-
-          this.$post(url, param, response => {
-            if(type === 'edit'){
-              this.editData.label = param.label;
-            } if(type === 'add') {
-              param.id = response.data;
-              if(pNode){
-                this.$refs.tree.append(param, pNode);
-              } else {
-                this.treeNodes.push(param);
-              }
-            }
-          });
-          this.form.name = '';
-        },
-      }
+        });
+        this.form.name = '';
+      },
     }
+  }
 </script>
 
 <style scoped>
@@ -211,6 +212,7 @@
     cursor: pointer;
     color: #409EFF;
   }
+
   .el-icon-arrow-down {
     font-size: 12px;
   }
@@ -229,12 +231,12 @@
     margin-top: 15px;
   }
 
-  .father .child{
-    display:none;
+  .father .child {
+    display: none;
   }
 
-  .father:hover .child{
-    display:block;
+  .father:hover .child {
+    display: block;
   }
 
 </style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index b2b78ae9b7..bb89008b76 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -107,7 +107,7 @@
               highlight-current-row>
               <el-table-column :label="$t('test_track.number')" prop="num" min-width="15%"></el-table-column>
               <el-table-column :label="$t('test_track.step_desc')" prop="desc" min-width="35%">
-                <template slot-scope="scope">
+                <template v-slot:default="scope">
                   <el-input
                     size="small"
                     v-model="scope.row.desc"
@@ -117,7 +117,7 @@
                 </template>
               </el-table-column>
               <el-table-column :label="$t('test_track.expected_results')" prop="result" min-width="35%">
-                <template slot-scope="scope">
+                <template v-slot:default="scope">
                   <el-input
                     size="small"
                     v-model="scope.row.result"
@@ -127,7 +127,7 @@
                 </template>
               </el-table-column>
               <el-table-column :label="$t('commons.input_content')" min-width="15%">
-                <template slot-scope="scope">
+                <template v-slot:default="scope">
                   <el-button
                     type="primary"
                     icon="el-icon-plus"
@@ -183,7 +183,7 @@
 
   import {CURRENT_PROJECT} from '../../../../../common/constants';
 
-    export default {
+  export default {
       name: "TestCaseEdit",
       data() {
         return {
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 6fdbe27c40..4f0654e00c 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -50,7 +50,7 @@
           :label="$t('test_track.type')"
           width="120"
           show-overflow-tooltip>
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span v-if="scope.row.type == 'functional'">{{$t('commons.functional')}}</span>
             <span v-if="scope.row.type == 'performance'">{{$t('commons.performance')}}</span>
             <span v-if="scope.row.type == 'interface'">{{$t('commons.interface')}}</span>
@@ -61,7 +61,7 @@
           :label="$t('test_track.method')"
           width="120"
           show-overflow-tooltip>
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span v-if="scope.row.method == 'manual'">{{$t('test_track.manual')}}</span>
             <span v-if="scope.row.method == 'auto'">{{$t('test_track.auto')}}</span>
           </template>
@@ -75,21 +75,21 @@
         <el-table-column
           width="160"
           :label="$t('commons.create_time')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span>{{ scope.row.createTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
         <el-table-column
           width="160"
           :label="$t('commons.update_time')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
         <el-table-column
           width="100"
           :label="$t('commons.operating')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
@@ -121,7 +121,7 @@
 <script>
   import {CURRENT_PROJECT} from '../../../../../common/constants';
 
-    export default {
+  export default {
       name: "TestCaseList",
       data() {
         return {
diff --git a/frontend/src/business/components/track/plan/components/PlanNodeTree.vue b/frontend/src/business/components/track/plan/components/PlanNodeTree.vue
index 2724b4ddbd..d36c92a495 100644
--- a/frontend/src/business/components/track/plan/components/PlanNodeTree.vue
+++ b/frontend/src/business/components/track/plan/components/PlanNodeTree.vue
@@ -4,17 +4,17 @@
     <el-input :placeholder="$t('test_track.search_module')" v-model="filterText" size="small"></el-input>
 
     <el-tree
-        class="filter-tree node-tree"
-        :data="treeNodes"
-        node-key="id"
-        @node-drag-end="handleDragEnd"
-        :filter-node-method="filterNode"
-        :expand-on-click-node="false"
-        draggable
-        ref="tree">
-      <span class="custom-tree-node father" slot-scope="{node}" @click="selectNode(node)">
-          {{node.label}}
-      </span>
+      class="filter-tree node-tree"
+      :data="treeNodes"
+      node-key="id"
+      @node-drag-end="handleDragEnd"
+      :filter-node-method="filterNode"
+      :expand-on-click-node="false"
+      draggable
+      ref="tree">
+      <template @click="selectNode(node)" v-slot:default="{node}">
+        {{node.label}}
+      </template>
     </el-tree>
   </div>
 
@@ -22,84 +22,84 @@
 </template>
 
 <script>
-    export default {
-      name: "NodeTree",
-      data() {
-        return {
-          filterText: '',
-          defaultProps: {
-            children: 'children',
-            label: 'label'
-          },
-          form: {
-            name: '',
-          },
-          formLabelWidth: '80px',
-          dialogTableVisible: false,
-          dialogFormVisible: false,
-          editType: '',
-          editData: {},
-          treeNodes: [],
-          defaultKeys: []
-        };
-      },
-      props: {
-        planId: {
-          type: String
-        }
-      },
-      watch: {
-        filterText(val) {
-          this.$refs.tree.filter(val);
-        }
-      },
-      created() {
-        this.getNodeTree();
-      },
-      methods: {
-        handleDragEnd(draggingNode, dropNode, dropType, ev) {
-          let param = {};
-          param.id = draggingNode.data.id;
-          if(dropType === 'inner'){
-            param.pId = dropNode.data.id;
-            param.level = dropNode.data.level + 1;
+  export default {
+    name: "NodeTree",
+    data() {
+      return {
+        filterText: '',
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        },
+        form: {
+          name: '',
+        },
+        formLabelWidth: '80px',
+        dialogTableVisible: false,
+        dialogFormVisible: false,
+        editType: '',
+        editData: {},
+        treeNodes: [],
+        defaultKeys: []
+      };
+    },
+    props: {
+      planId: {
+        type: String
+      }
+    },
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      }
+    },
+    created() {
+      this.getNodeTree();
+    },
+    methods: {
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        let param = {};
+        param.id = draggingNode.data.id;
+        if (dropType === 'inner') {
+          param.pId = dropNode.data.id;
+          param.level = dropNode.data.level + 1;
+        } else {
+          if (dropNode.parent.id === 0) {
+            param.pId = 0;
+            param.level = 1;
           } else {
-            if(dropNode.parent.id === 0){
-              param.pId = 0;
-              param.level = 1;
-            } else {
-              param.pId = dropNode.parent.data.id;
-              param.level = dropNode.parent.data.level + 1;
-            }
-          }
-          this.$post('/case/node/edit', param);
-        },
-        selectNode(node) {
-          let nodeIds = [];
-          this.getChildNodeId(node, nodeIds);
-          this.$emit("nodeSelectEvent", nodeIds);
-        },
-        getChildNodeId(rootNode, nodeIds) {
-          //递归获取所有子节点ID
-          nodeIds.push(rootNode.data.id);
-          for (let i = 0; i < rootNode.childNodes.length; i++){
-            this.getChildNodeId(rootNode.childNodes[i], nodeIds);
-          }
-          return nodeIds;
-        },
-        filterNode(value, data) {
-          if (!value) return true;
-          return data.label.indexOf(value) !== -1;
-        },
-        getNodeTree() {
-          if(this.planId){
-            this.$get("/case/node/list/plan/" + this.planId, response => {
-              this.treeNodes = response.data;
-            });
+            param.pId = dropNode.parent.data.id;
+            param.level = dropNode.parent.data.level + 1;
           }
         }
+        this.$post('/case/node/edit', param);
+      },
+      selectNode(node) {
+        let nodeIds = [];
+        this.getChildNodeId(node, nodeIds);
+        this.$emit("nodeSelectEvent", nodeIds);
+      },
+      getChildNodeId(rootNode, nodeIds) {
+        //递归获取所有子节点ID
+        nodeIds.push(rootNode.data.id);
+        for (let i = 0; i < rootNode.childNodes.length; i++) {
+          this.getChildNodeId(rootNode.childNodes[i], nodeIds);
+        }
+        return nodeIds;
+      },
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+      },
+      getNodeTree() {
+        if (this.planId) {
+          this.$get("/case/node/list/plan/" + this.planId, response => {
+            this.treeNodes = response.data;
+          });
+        }
       }
     }
+  }
 </script>
 
 <style scoped>
@@ -108,6 +108,7 @@
     cursor: pointer;
     color: #409EFF;
   }
+
   .el-icon-arrow-down {
     font-size: 12px;
   }
@@ -126,12 +127,12 @@
     margin-top: 15px;
   }
 
-  .father .child{
-    display:none;
+  .father .child {
+    display: none;
   }
 
-  .father:hover .child{
-    display:block;
+  .father:hover .child {
+    display: block;
   }
 
 </style>
diff --git a/frontend/src/business/components/track/plan/components/TestCasePlanList.vue b/frontend/src/business/components/track/plan/components/TestCasePlanList.vue
index fcb0ef510b..8f68462f4a 100644
--- a/frontend/src/business/components/track/plan/components/TestCasePlanList.vue
+++ b/frontend/src/business/components/track/plan/components/TestCasePlanList.vue
@@ -50,7 +50,7 @@
           :label="$t('test_track.type')"
           width="120"
           show-overflow-tooltip>
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span v-if="scope.row.type == 'functional'">{{$t('commons.functional')}}</span>
             <span v-if="scope.row.type == 'performance'">{{$t('commons.performance')}}</span>
             <span v-if="scope.row.type == 'interface'">{{$t('commons.interface')}}</span>
@@ -61,7 +61,7 @@
           :label="$t('test_track.method')"
           width="120"
           show-overflow-tooltip>
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span v-if="scope.row.method == 'manual'">{{$t('test_track.manual')}}</span>
             <span v-if="scope.row.method == 'auto'">{{$t('test_track.auto')}}</span>
           </template>
@@ -75,21 +75,21 @@
         <el-table-column
           width="160"
           :label="$t('commons.create_time')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span>{{ scope.row.createTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
         <el-table-column
           width="160"
           :label="$t('commons.update_time')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
         <el-table-column
           width="100"
           :label="$t('commons.operating')">
-          <template slot-scope="scope">
+          <template v-slot:default="scope">
             <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
             <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
           </template>
@@ -122,7 +122,7 @@
   import {CURRENT_PROJECT} from '../../../../../common/constants';
   import PlanNodeTree from './PlanNodeTree';
 
-    export default {
+  export default {
       name: "TestCaseList",
       components: {PlanNodeTree},
       data() {
diff --git a/frontend/src/business/components/track/plan/components/TestCaseRelevance.vue b/frontend/src/business/components/track/plan/components/TestCaseRelevance.vue
index 7a543a229d..33f37245e1 100644
--- a/frontend/src/business/components/track/plan/components/TestCaseRelevance.vue
+++ b/frontend/src/business/components/track/plan/components/TestCaseRelevance.vue
@@ -26,7 +26,7 @@
                       <el-checkbox v-model="checkAll"></el-checkbox>
                       用例名称
                     </template>
-                    <template slot-scope="scope">
+                    <template v-slot:default="scope">
                       <el-checkbox v-model="scope.row.checked"></el-checkbox>
                       {{scope.row.name}}
                     </template>
@@ -64,7 +64,7 @@
   import {CURRENT_PROJECT} from '../../../../../common/constants';
   import PlanNodeTree from './PlanNodeTree';
 
-    export default {
+  export default {
       name: "TestCaseEdit",
       components: {PlanNodeTree},
       data() {
diff --git a/frontend/src/business/components/track/plan/components/TestPlanList.vue b/frontend/src/business/components/track/plan/components/TestPlanList.vue
index 390d95fefd..0eba34145c 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanList.vue
@@ -52,7 +52,7 @@
             :label="$t('test_track.plan_status')"
             width="130"
             show-overflow-tooltip>
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span v-if="scope.row.status == 'Prepare'">{{$t('test_track.plan_status_prepare')}}</span>
               <span v-if="scope.row.status == 'Running'">{{$t('test_track.plan_status_running')}}</span>
               <span v-if="scope.row.status == 'Completed'">{{$t('test_track.plan_status_completed')}}</span>
@@ -63,7 +63,7 @@
             :label="$t('test_track.plan_stage')"
             width="130"
             show-overflow-tooltip>
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span v-if="scope.row.stage == 'smoke'">{{$t('test_track.smoke_test')}}</span>
               <span v-if="scope.row.stage == 'functional'">{{$t('test_track.functional_test')}}</span>
               <span v-if="scope.row.stage == 'integration'">{{$t('test_track.integration_testing')}}</span>
@@ -80,21 +80,21 @@
           <el-table-column
             width="160"
             :label="$t('commons.create_time')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span>{{ scope.row.createTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
             width="160"
             :label="$t('commons.update_time')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
             width="160"
             :label="$t('commons.operating')">
-            <template slot-scope="scope">
+            <template v-slot:default="scope">
               <el-button @click="handleEdit(scope.row)"
                          @click.stop="deleteVisible = true" type="primary"
                          icon="el-icon-edit" size="mini" circle/>