完善演示页面

src/components/FsTableSelect/index.vue

@@ -250,12 +250,13 @@ export default defineComponent({
     :width="popperWidth"
     :popper-class="popperClass"
     :popper-options="popperOptions"
+    :disabled="disabled"
     trigger="click"
     transition="el-zoom-in-top"
     teleported
   >
     <template #reference>
-      <div class="table-select-container" :class="{ 'table-multiple-select': multiple }">
+      <div class="table-select-container" :class="{ 'table-multiple': multiple }">
         <el-input
           :size="size"
           :disabled="disabled"
@@ -285,12 +286,12 @@ export default defineComponent({
             </div>
           </template>
         </el-input>
-        <div class="table-select-multiple" v-if="multiple">
+        <div class="table-multiple-tag" :class="{ 'is-disabled': disabled }" v-if="multiple">
           <el-tag
             :type="tagType"
             size="small"
             disable-transitions
-            closable
+            :closable="!disabled"
             style="margin-right: 5px"
             v-for="item in currentValues"
             :key="item[valueKey]"
@@ -374,7 +375,7 @@ export default defineComponent({
     }
   }
 }
-.table-multiple-select {
+.table-multiple {
   :deep(.el-input) {
     position: absolute;
     width: 100%;
@@ -383,15 +384,18 @@ export default defineComponent({
     left: 0;
   }
 }
-.table-select-multiple {
+.table-multiple-tag {
   position: relative;
   top: 0px;
   width: calc(100% - 24px);
   height: 100%;
-  min-height: 30px;
+  min-height: 34px;
   z-index: 2;
-  padding: 2px 10px 4px 10px;
+  padding: 0px 10px 2px 10px;
   box-sizing: border-box;
+  &.is-disabled {
+    cursor: not-allowed;
+  }
 }
 .table-select-pagination {
   display: flex;

src/views/tableSelect/base.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import FsTableSelect from '@/components/FsTableSelect/index.vue'
+import type { TableConfig } from '@/components/FsTableSelect/types'
+
+const data = ref('')
+
+const datas = ref([])
+
+const request = function ({ pageIndex }: any) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const data = [
+        { name: '张三' + pageIndex, sex: '男', id: '' + pageIndex + 1 },
+        { name: '李四' + pageIndex, sex: '女', id: '' + pageIndex + 2 },
+        { name: '王五' + pageIndex, sex: '男', id: '' + pageIndex + 3 },
+        { name: '赵六' + pageIndex, sex: '女', id: '' + pageIndex + 4 },
+        { name: '张三' + pageIndex, sex: '男', id: '' + pageIndex + 5 }
+      ]
+      resolve(data)
+    }, 1500)
+  })
+}
+
+const tableConfig: TableConfig = {
+  column: [
+    {
+      title: '#',
+      type: 'seq',
+      width: 45,
+      align: 'center'
+    },
+    {
+      title: '姓名',
+      field: 'name',
+      align: 'center'
+    },
+    {
+      title: '性别',
+      align: 'center',
+      slot: 'sex'
+    }
+  ],
+  datasource: request,
+  total: 100,
+  pageSize: 5
+}
+</script>
+
+<template>
+  <el-form label-width="80px">
+    <el-row :gutter="15">
+      <el-col :span="6">
+        <el-form-item label="单选">
+          <fs-table-select v-model="data" :tableConfig="tableConfig">
+            <template #sex="{ row }">
+              <el-tag size="small">{{ row.sex }}</el-tag>
+            </template>
+          </fs-table-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="多选">
+          <fs-table-select v-model="datas" :tableConfig="tableConfig" multiple>
+            <template #sex="{ row }">
+              <el-tag size="small">{{ row.sex }}</el-tag>
+            </template>
+          </fs-table-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<style scoped></style>

src/views/tableSelect/disabled.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import FsTableSelect from '@/components/FsTableSelect/index.vue'
+import type { TableConfig } from '@/components/FsTableSelect/types'
+
+const data = ref('')
+
+const datas = ref([])
+
+const isDisabled = ref(true)
+
+const request = function ({ pageIndex }: any) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const data = [
+        { name: '张三' + pageIndex, sex: '男', id: '' + pageIndex + 1 },
+        { name: '李四' + pageIndex, sex: '女', id: '' + pageIndex + 2 },
+        { name: '王五' + pageIndex, sex: '男', id: '' + pageIndex + 3 },
+        { name: '赵六' + pageIndex, sex: '女', id: '' + pageIndex + 4 },
+        { name: '张三' + pageIndex, sex: '男', id: '' + pageIndex + 5 }
+      ]
+      resolve(data)
+    }, 1500)
+  })
+}
+
+const tableConfig: TableConfig = {
+  column: [
+    {
+      title: '#',
+      type: 'seq',
+      width: 45,
+      align: 'center'
+    },
+    {
+      title: '姓名',
+      field: 'name',
+      align: 'center'
+    },
+    {
+      title: '性别',
+      align: 'center',
+      slot: 'sex'
+    }
+  ],
+  datasource: request,
+  total: 100,
+  pageSize: 5
+}
+</script>
+
+<template>
+  <el-form label-width="80px">
+    <el-row :gutter="15">
+      <el-col :span="24">
+        <el-form-item label="">
+          <el-radio-group v-model="isDisabled">
+            <el-radio label="禁用" :value="true"> </el-radio>
+            <el-radio label="启用" :value="false"> </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="单选">
+          <fs-table-select v-model="data" :tableConfig="tableConfig" :disabled="isDisabled">
+            <template #sex="{ row }">
+              <el-tag size="small">{{ row.sex }}</el-tag>
+            </template>
+          </fs-table-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="多选">
+          <fs-table-select v-model="datas" :tableConfig="tableConfig" :disabled="isDisabled" multiple>
+            <template #sex="{ row }">
+              <el-tag size="small">{{ row.sex }}</el-tag>
+            </template>
+          </fs-table-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<style scoped></style>

src/views/tableSelect/index.vue

@@ -1,127 +1,19 @@
 <script setup lang="ts">
-import FsTableSelect from '@/components/FsTableSelect/index.vue'
-import type { TableConfig } from '@/components/FsTableSelect/types'
-
-const data = ref('')
-const current = ref(null)
-
-const request = function ({ pageIndex }: any) {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      const data = [
-        { name: '张三', sex: '男', id: '' + pageIndex + 1 },
-        { name: '李四', sex: '女', id: '' + pageIndex + 2 },
-        { name: '王五', sex: '男', id: '' + pageIndex + 3 },
-        { name: '赵六', sex: '女', id: '' + pageIndex + 4 },
-        { name: '张三', sex: '男', id: '' + pageIndex + 5 }
-      ]
-      resolve(data)
-    }, 1500)
-  })
-}
-
-const tableConfig: TableConfig = {
-  column: [
-    {
-      title: '#',
-      type: 'seq',
-      width: 45,
-      align: 'center'
-    },
-    {
-      title: '姓名',
-      field: 'name',
-      align: 'center'
-    },
-    {
-      title: '性别',
-      align: 'center',
-      slot: 'sex'
-    }
-  ],
-  datasource: request,
-  total: 100,
-  pageSize: 5
-}
-
-const tableSelectChange = (value: any) => {
-  current.value = value
-}
-
-const tableSelectClear = () => {
-  current.value = null
-}
-
-const tableSelectItemClear = ({ list }: any) => {
-  current.value = list
-}
-
-const tableSelectRef = ref()
-const form = ref({
-  name: '',
-  sex: ''
-})
-
-const search = () => {
-  tableSelectRef.value.reload({ pageIndex: 1, ...form.value })
-}
+import Base from './base.vue'
+import Disabled from './disabled.vue'
+import Search from './search.vue'
 </script>
 
 <template>
-  <div class="w-full bg-white p-4">
-    <p>当前选中行数据：{{ current }}</p>
-    <p>当前数据:{{ data }}</p>
-    <div class="w-230px">
-      <fs-table-select
-        v-model="data"
-        multiple
-        :tableConfig="tableConfig"
-        @change="tableSelectChange"
-        @clear="tableSelectClear"
-        @item-clear="tableSelectItemClear"
-      >
-        <template #sex="{ row }">
-          <el-tag size="small">{{ row.sex }}</el-tag>
-        </template>
-      </fs-table-select>
-    </div>
-  </div>
-  <div class="w-full bg-white p-4 mt-3">
-    <div class="w-230px">
-      <fs-table-select
-        v-model="data"
-        multiple
-        :tableConfig="tableConfig"
-        @change="tableSelectChange"
-        @clear="tableSelectClear"
-        @item-clear="tableSelectItemClear"
-        ref="tableSelectRef"
-      >
-        <template #top-extra>
-          <el-form :model="form" label-width="40px">
-            <el-row :gutter="15">
-              <el-col :span="8">
-                <el-form-item label="姓名" prop="name">
-                  <el-input placeholder="请填写姓名" :maxLength="20" v-model="form.name"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="性别" prop="sex">
-                  <el-select placeholder="请选择性别" v-model="form.sex"></el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-button type="primary" @click="search">查询</el-button>
-              </el-col>
-            </el-row>
-          </el-form>
-        </template>
-        <template #sex="{ row }">
-          <el-tag size="small">{{ row.sex }}</el-tag>
-        </template>
-      </fs-table-select>
-    </div>
-  </div>
+  <el-card header="基础示例" shadow="never">
+    <Base class="mt-3" />
+  </el-card>
+  <el-card header="是否禁用" shadow="never" class="mt-5">
+    <Disabled class="mt-3" />
+  </el-card>
+  <el-card header="自定义搜索" shadow="never" class="mt-5">
+    <Search class="mt-3" />
+  </el-card>
 </template>
 
 <style scoped></style>

src/views/tableSelect/search.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import FsTableSelect from '@/components/FsTableSelect/index.vue'
+import type { TableConfig } from '@/components/FsTableSelect/types'
+
+const data = ref('')
+const datas = ref([])
+
+const initValue = ref({})
+const initValue2 = ref<Array<any>>([])
+
+const current = ref(null)
+
+const request = function ({ pageIndex }: any) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const data = [
+        { name: '张三', sex: '男', id: '' + pageIndex + 1 },
+        { name: '李四', sex: '女', id: '' + pageIndex + 2 },
+        { name: '王五', sex: '男', id: '' + pageIndex + 3 },
+        { name: '赵六', sex: '女', id: '' + pageIndex + 4 },
+        { name: '张三', sex: '男', id: '' + pageIndex + 5 }
+      ]
+      resolve(data)
+    }, 500)
+  })
+}
+
+const tableConfig: TableConfig = {
+  column: [
+    {
+      title: '#',
+      type: 'seq',
+      width: 45,
+      align: 'center'
+    },
+    {
+      title: '姓名',
+      field: 'name',
+      align: 'center'
+    },
+    {
+      title: '性别',
+      align: 'center',
+      slot: 'sex'
+    }
+  ],
+  datasource: request,
+  total: 100,
+  pageSize: 5
+}
+
+const tableSelectChange = (value: any) => {
+  current.value = value
+}
+
+const tableSelectClear = () => {
+  current.value = null
+}
+
+const tableSelectItemClear = ({ list }: any) => {
+  current.value = list
+}
+
+const tableSelectRef = ref()
+const tableSelectRef2 = ref()
+const form = ref({
+  name: '',
+  sex: ''
+})
+
+const search = () => {
+  tableSelectRef.value.reload({ pageIndex: 1, ...form.value })
+}
+const search2 = () => {
+  tableSelectRef2.value.reload({ pageIndex: 1, ...form.value })
+}
+
+const setInitValue = () => {
+  initValue.value = { name: '张三2', sex: '男', id: '21' }
+  initValue2.value = [
+    { name: '李四2', sex: '女', id: '22' },
+    { name: '王五3', sex: '男', id: '33' },
+    { name: '王五4', sex: '男', id: '43' },
+    { name: '赵六4', sex: '女', id: '44' }
+  ]
+}
+</script>
+
+<template>
+  <el-form label-width="90px">
+    <el-row :gutter="15">
+      <el-col :span="24">
+        <el-form-item>
+          <el-button type="primary" @click="setInitValue">设置回显数据</el-button>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="单选" prop="name">
+          <fs-table-select
+            v-model="data"
+            :tableConfig="tableConfig"
+            :init-value="initValue"
+            @change="tableSelectChange"
+            @clear="tableSelectClear"
+            @item-clear="tableSelectItemClear"
+            ref="tableSelectRef"
+          >
+            <template #top-extra>
+              <el-form :model="form" label-width="40px">
+                <el-row :gutter="15">
+                  <el-col :span="8">
+                    <el-form-item label="姓名">
+                      <el-input placeholder="请填写姓名" :maxLength="20" v-model="form.name"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-form-item label="性别" prop="sex">
+                      <el-select placeholder="请选择性别" v-model="form.sex"></el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-button type="primary" @click="search">查询</el-button>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </template>
+            <template #sex="{ row }">
+              <el-tag size="small">{{ row.sex }}</el-tag>
+            </template>
+          </fs-table-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="多选">
+          <fs-table-select
+            v-model="datas"
+            :init-value="initValue2"
+            :tableConfig="tableConfig"
+            multiple
+            ref="tableSelectRef2"
+          >
+            <template #top-extra>
+              <el-form :model="form" label-width="40px">
+                <el-row :gutter="15">
+                  <el-col :span="8">
+                    <el-form-item label="姓名" prop="name">
+                      <el-input placeholder="请填写姓名" :maxLength="20" v-model="form.name"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-form-item label="性别" prop="sex">
+                      <el-select placeholder="请选择性别" v-model="form.sex"></el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-button type="primary" @click="search2">查询</el-button>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </template>
+            <template #sex="{ row }">
+              <el-tag size="small">{{ row.sex }}</el-tag>
+            </template>
+          </fs-table-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<style scoped></style>