feat: ✨ 增加列表选择组件使用示例

src/views/demo/table-select/index.vue

@@ -0,0 +1,51 @@
+<!-- 列表选择器示例 -->
+<script setup lang="ts">
+import selectConfig from "./config/select";
+
+interface IUser {
+  id: number;
+  username: string;
+  nickname: string;
+  mobile: string;
+  genderLabel: string;
+  avatar: string;
+  email: string | null;
+  status: number;
+  deptName: string;
+  roleNames: string;
+  createTime: string;
+}
+const selectedUser = ref<IUser>();
+function handleConfirm(data: IUser[]) {
+  selectedUser.value = data[0];
+}
+const text = computed(() => {
+  return selectedUser.value
+    ? `${selectedUser.value.username} - ${selectedUser.value.genderLabel} - ${selectedUser.value.deptName}`
+    : "";
+});
+</script>
+
+<template>
+  <div class="app-container">
+    <el-link
+      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/table-select/index.vue"
+      type="primary"
+      target="_blank"
+      class="mb-10"
+    >
+      示例源码 请点击>>>>
+    </el-link>
+    <table-select
+      :text="text"
+      :select-config="selectConfig"
+      @confirm-click="handleConfirm"
+    >
+      <template #status="scope">
+        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+        </el-tag>
+      </template>
+    </table-select>
+  </div>
+</template>