员工列表筛选搜索优化展示

src/components/TableList.vue

@@ -18,10 +18,15 @@
               >
                 <template v-for="option in item.options">
                   <el-option
-                    :label="option[item.labelKey] || option.label"
+                    :label="option[item.labelKey] || option[item.alternateLabelKey] || option.label"
                     :value="option[item.valueKey] || option.value"
                     :key="option.value"
-                  ></el-option>
+                  >
+                    <template v-if="item.slots || item.computed">
+                      <slot :name="item.slots" v-bind="option" v-if="item.slots"></slot>
+                      <div v-html="item.computed(scope)" v-if="item.computed"></div>
+                    </template>
+                  </el-option>
                 </template>
               </el-select>
             </el-form-item>

src/pages/settings/staff/index.vue

@@ -4,6 +4,17 @@
       <template #header-aside>
         <el-button type="primary" size="mini" @click="handleCreate" v-if="hasCreate">新建员工</el-button>
       </template>
+      <!-- 筛选-搜索用户 -->
+      <template v-slot:filter-user="option">
+        <div style="display:flex;">
+          <span>
+            {{ option.real_name || option.nickname }}
+            <template v-if="option.mobile">(手机号：{{option.mobile}})</template>
+          </span>
+          <span style="color: #8492a6; font-size: 13px; margin:0 20px 0 10px;" v-if="option.email">邮箱：{{ user.email }}</span>
+          <span style="color: #8492a6; font-size: 13px; margin:0 20px 0 10px;" v-else>ID：{{ option.id }}</span>
+        </div>
+      </template>
       <!-- 姓名 -->
       <template v-slot:table-name="{ row }">
         <p class="details-handle" @click="handleDetails(row)">{{row.sso_user.real_name || row.sso_user.nickname}}</p>
@@ -20,7 +31,7 @@
       </template>
       <!-- 创建人 -->
       <template v-slot:table-creator="{ row }">
-        <p>{{row.create_user.real_name || row.create_user.nickname}}</p>
+        <p>{{row.create_user.realname || row.create_user.nickname}}</p>
       </template>
       <!-- 发布状态 -->
       <template v-slot:status="{ row }">
@@ -45,10 +56,10 @@
           </el-form-item>
           <el-form-item label="账户" prop="sso_id" v-else style="position:relative;">
             <el-select v-model="form.sso_id" placeholder="输入邮箱/手机号码搜索" size="small" filterable remote :remote-method="fetchUserList" :loading="searchUsersloading" style="width:100%;">
-              <el-option :label="user.real_name || user.nickname " :value="user.id" v-for="user in userList" :key="user.id" >
+              <el-option :label="user.realname || user.nickname " :value="user.id" v-for="user in userList" :key="user.id" >
                 <div style="display:flex;">
                   <span>
-                    {{ user.real_name || user.nickname }}
+                    {{ user.realname || user.nickname }}
                     <template v-if="user.mobile">(手机号：{{user.mobile}})</template>
                   </span>
                   <span style="color: #8492a6; font-size: 13px; margin:0 20px 0 10px;" v-if="user.email">邮箱：{{ user.email }}</span>
@@ -232,10 +243,12 @@ export default {
             options: this.userList,
             prop: 'sso_id',
             labelKey: 'realname',
+            alternateLabelKey: 'nickname',
             valueKey: 'id',
             filterable: true,
             remote: true,
-            'remote-method': this.fetchUserList
+            'remote-method': this.fetchUserList,
+            slots: 'filter-user'
           },
           {
             type: 'select',