mod vue2 to vue3

exam-vue/src/views/sys/user/index.vue

@@ -9,18 +9,18 @@
       @multi-actions="handleMultiAction"
     >
 
-      <template slot="filter-content">
+      <template #filter-content>
 
         <el-input v-model="listQuery.params.userName" style="width: 200px" placeholder="搜索登录名" class="filter-item" />
         <el-input v-model="listQuery.params.realName" style="width: 200px" placeholder="搜索姓名" class="filter-item" />
-        <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">
-          添加
+        <el-button class="filter-item" type="primary" @click="handleAdd">
+          <el-icon><Plus /></el-icon> 添加
         </el-button>
       </template>
-      <template slot="data-columns">
+      <template #data-columns>
         <el-table-column type="selection" width="55"/>
         <el-table-column align="center" label="用户名">
-          <template slot-scope="scope">
+          <template #default="scope">
             <a style="color: #1890ff" @click="handleUpdate(scope.row)">{{ scope.row.userName }}</a>
           </template>
         </el-table-column>
@@ -28,19 +28,19 @@
         <el-table-column align="center" label="角色" prop="roleIds"/>
         <el-table-column align="center" label="创建时间" prop="createTime"/>
         <el-table-column align="center" label="创建时间">
-          <template slot-scope="scope">
-            {{ scope.row.createTime | xmDateFormat }}
+          <template #default="scope">
+            {{ $filters.xmDateFormat(scope.row.createTime) }}
           </template>
         </el-table-column>
         <el-table-column align="center" label="状态">
-          <template slot-scope="scope">
-            {{ scope.row.state | stateFilter }}
+          <template #default="scope">
+            {{ $filters.stateFilter(scope.row.state) }}
           </template>
         </el-table-column>
       </template>
     </data-table>
 
-    <el-dialog :visible.sync="dialogVisible" title="添加用户" width="500px">
+    <el-dialog v-model="dialogVisible" title="添加用户" width="500px">
 
       <el-form :model="formData" label-position="left" label-width="100px">
 
@@ -70,10 +70,12 @@
         <!--          />-->
         <!--        </el-form-item>-->
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <template #footer>
+        <div class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="handleSave">确 定</el-button>
-      </div>
+        </div>
+      </template>
 
     </el-dialog>
 
@@ -82,30 +84,18 @@
 </template>
 
 <script>
-import DataTable from '@/components/DataTable'
-import MeetRole from '@/components/MeetRole'
-import { saveData } from '@/api/sys/user/user'
-import DepartTreeSelect from '@/components/DepartTreeSelect'
-import { fetchTree } from '@/api/sys/depart/depart'
+import DataTable from '@/components/DataTable/index.vue'
+import MeetRole from '@/components/MeetRole/index.vue'
+import { saveData } from '@/api/sys/user/user.js'
+import DepartTreeSelect from '@/components/DepartTreeSelect/index.vue'
 
 export default {
   name: 'SysUserList',
   components: { DepartTreeSelect, DataTable, MeetRole },
-  filters: {
-
-    // 订单状态
-    userState(value) {
-      const map = {
-        '0': '正常',
-        '1': '禁用'
-      }
-      return map[value]
-    }
-  },
   data() {
     return {
 
-      treeData: [],
+
       defaultProps: {
         value: 'id',
         label: 'deptName',
@@ -149,9 +139,7 @@ export default {
   },
 
   created() {
-    fetchTree({}).then(response => {
-      this.treeData = response.data
-    })
+
   },
 
   methods: {