modal标题替换

src/views/system/user/components/UserModal.vue

@@ -13,12 +13,9 @@
         >
           <n-upload
             action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
-            :default-file-list="previewFileList"
             list-type="image-card"
-            @preview="handlePreview"
           />
           <n-modal
-            v-model:show="showModal"
             preset="card"
             style="width: 600px"
             title="头像"
@@ -153,10 +150,6 @@ export default defineComponent({
     row: {
       type: Object,
       default: () => {}
-    },
-    title: {
-      type: String,
-      default: '添加用户'
     }
   },
   emits: {
@@ -167,7 +160,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const getModalOptions = computed(() => {
       return {
-        title: props.title,
+        title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
         show: props.visible
       }
     })

src/views/system/user/index.vue

@@ -15,7 +15,7 @@
     </n-card>
   </div>
   <!-- 新增、编辑弹窗 -->
-  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" :title="modalTitle" />
+  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" />
 </template>
 
 <script>
@@ -24,7 +24,7 @@ import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableImage from '@/components/DataTable/tools/Image.vue'
 import TableTags from '@/components/DataTable/tools/Tags.vue'
 import { getUserList } from '@/api/system/user/index.js'
-import { h, unref, ref } from 'vue'
+import { h, unref, toRefs } from 'vue'
 import { reactive } from 'vue'
 import UserModal from './components/UserModal.vue'
 export default {
@@ -74,7 +74,17 @@ export default {
           align: 'center',
           render(row) {
             return h(TableTags, {
-              data: row.roles
+              data: row.roles,
+              rowKey: 'name',
+              filters: [
+                {
+                  key: '超级管理员',
+                  label: '123',
+                  color: {
+                    textColor: 'red'
+                  }
+                }
+              ]
             })
           }
         },
@@ -131,12 +141,12 @@ export default {
       ],
       modalShow: false
     })
-    const modalTitle = ref('添加用户')
+    const modalData = reactive({
-    let rowData = reactive({})
+      rowData: {}
+    })
     // 打开编辑弹窗
     function play(row) {
-      rowData = row
+      modalData.rowData = row
-      modalTitle.value = '编辑用户'
       console.log('编辑弹窗内容：', row)
       data.modalShow = true
     }
@@ -153,18 +163,17 @@ export default {
       return await getUserList(_params)
     }
     function handleUser() {
-      rowData = {}
+      modalData.rowData = {}
-      modalTitle.value = '添加用户'
       data.modalShow = true
     }
 
-    return { data, loadDataTable, handleUser, rowData, modalTitle }
+    return { data, loadDataTable, handleUser, ...toRefs(modalData) }
   },
   methods: {
     // 批量删除用户
     deleteUsers() {
 
-    },
+    }
 
   }
 }