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

src/views/demo/table-select/config/select.ts

@@ -0,0 +1,112 @@
+import UserAPI from "@/api/user";
+import type { ISelectConfig } from "@/components/TableSelect/index.vue";
+
+const selectConfig: ISelectConfig = {
+  pk: "id",
+  width: "70%",
+  placeholder: "请选择用户",
+  formItems: [
+    {
+      type: "input",
+      label: "关键字",
+      prop: "keywords",
+      attrs: {
+        placeholder: "用户名/昵称/手机号",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+    {
+      type: "tree-select",
+      label: "部门",
+      prop: "deptId",
+      attrs: {
+        placeholder: "请选择",
+        data: [
+          {
+            value: 1,
+            label: "有来技术",
+            children: [
+              {
+                value: 2,
+                label: "研发部门",
+              },
+              {
+                value: 3,
+                label: "测试部门",
+              },
+            ],
+          },
+        ],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+        clearable: true,
+        style: {
+          width: "150px",
+        },
+      },
+    },
+    {
+      type: "select",
+      label: "状态",
+      prop: "status",
+      attrs: {
+        placeholder: "全部",
+        clearable: true,
+        style: {
+          width: "100px",
+        },
+      },
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+    },
+    {
+      type: "date-picker",
+      label: "创建时间",
+      prop: "createAt",
+      attrs: {
+        type: "daterange",
+        "range-separator": "~",
+        "start-placeholder": "开始时间",
+        "end-placeholder": "截止时间",
+        "value-format": "YYYY-MM-DD",
+        style: {
+          width: "240px",
+        },
+      },
+    },
+  ],
+  indexAction: function (params) {
+    if ("createAt" in params) {
+      const createAt = params.createAt as string[];
+      params.startTime = createAt[0];
+      params.endTime = createAt[1];
+      delete params.createAt;
+    }
+    return UserAPI.getPage(params);
+  },
+  tableColumns: [
+    { type: "selection", width: 50, align: "center" },
+    { label: "编号", align: "center", prop: "id", width: 100 },
+    { label: "用户名", align: "center", prop: "username" },
+    { label: "用户昵称", align: "center", prop: "nickname", width: 120 },
+    { label: "性别", align: "center", prop: "genderLabel", width: 100 },
+    { label: "部门", align: "center", prop: "deptName", width: 120 },
+    { label: "手机号码", align: "center", prop: "mobile", width: 120 },
+    {
+      label: "状态",
+      align: "center",
+      prop: "status",
+      templet: "custom",
+      slotName: "status",
+    },
+    { label: "创建时间", align: "center", prop: "createTime", width: 180 },
+  ],
+};
+
+export default selectConfig;

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>