feat: 添加 @pureadmin/table 表格选择器（单选、多选）示例

src/views/pure-table/high/table-select/multiple/columns.tsx

@@ -0,0 +1,74 @@
+import { tableDataEdit } from "../../data";
+import { ref, reactive, type Ref } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+
+export function useColumns(selectRef: Ref, tableRef: Ref) {
+  const selectValue = ref([]);
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      align: "left"
+    },
+    {
+      label: "ID",
+      prop: "id",
+      width: 80
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 10,
+    currentPage: 1,
+    layout: "prev, pager, next",
+    total: tableDataEdit.length,
+    background: true,
+    small: true
+  });
+
+  const handleSelectionChange = val => {
+    const arr = [];
+    val.forEach(v => {
+      arr.push(v.name);
+    });
+    selectValue.value = arr;
+  };
+
+  const removeTag = val => {
+    // TODO optimize el-select add formatter
+    const { toggleRowSelection } = tableRef.value.getTableRef();
+    toggleRowSelection(tableDataEdit.filter(v => v.name === val)[0], false);
+  };
+
+  const onClear = () => {
+    const { clearSelection } = tableRef.value.getTableRef();
+    clearSelection();
+  };
+
+  const onSure = () => {
+    selectRef.value.blur();
+  };
+
+  return {
+    columns,
+    pagination,
+    selectValue,
+    tableDataEdit,
+    onSure,
+    onClear,
+    removeTag,
+    handleSelectionChange
+  };
+}

src/views/pure-table/high/table-select/multiple/index.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const selectRef = ref();
+const tableRef = ref();
+const {
+  columns,
+  pagination,
+  selectValue,
+  tableDataEdit,
+  onClear,
+  onSure,
+  removeTag,
+  handleSelectionChange
+} = useColumns(selectRef, tableRef);
+</script>
+
+<template>
+  <el-select
+    class="w-[160px]"
+    ref="selectRef"
+    v-model="selectValue"
+    placeholder="请选择"
+    clearable
+    multiple
+    collapse-tags
+    collapse-tags-tooltip
+    @remove-tag="removeTag"
+    @clear="onClear"
+  >
+    <template #empty>
+      <div class="w-[600px] m-4">
+        <pure-table
+          ref="tableRef"
+          height="355"
+          row-key="id"
+          :header-cell-style="{
+            background: '#f5f7fa',
+            color: '#303133'
+          }"
+          :data="
+            tableDataEdit.slice(
+              (pagination.currentPage - 1) * pagination.pageSize,
+              pagination.currentPage * pagination.pageSize
+            )
+          "
+          :columns="columns"
+          :pagination="pagination"
+          @selection-change="handleSelectionChange"
+        />
+        <el-button
+          class="absolute bottom-[17px]"
+          type="primary"
+          size="small"
+          text
+          bg
+          @click="onSure"
+        >
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-select>
+</template>