fs-admin/src/views/extension/tableSelect/disabled.vue

<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 ({ pageNo }: any) {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = {
        list: [
          { name: '张三' + pageNo, sex: '男', id: '' + pageNo + 1 },
          { name: '李四' + pageNo, sex: '女', id: '' + pageNo + 2 },
          { name: '王五' + pageNo, sex: '男', id: '' + pageNo + 3 },
          { name: '赵六' + pageNo, sex: '女', id: '' + pageNo + 4 },
          { name: '张三' + pageNo, sex: '男', id: '' + pageNo + 5 }
        ],
        total: 10
      }
      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,
  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>