sl-sfy-safety/src/views/comp/tableSelect/tableSelect.vue

<template>
  <PageWrapper
    title="表格选择器"
    content="选择器增强，用于展示多列数据表格选择器，可实现单选/多选，还能配置表单查询，项目实测，还是挺实用的"
  >
    <el-card :bordered="false" class="mt-3 proCard">
      <el-alert title="单选" type="info"> 这是一个看起来像多选的单选效果，试试看吧 </el-alert>
      <div class="mt-3">
        <el-space align="center">
          <TableSelect
            ref="TableSelectRef"
            labelField="name"
            valueField="id"
            placeholder="请选择内容（单选）"
            :tableProps="{
              rowKey: 'id',
              request: loadDataTable,
              columns: columns,
            }"
            @change="tableSelectChange"
          />
        </el-space>
      </div>
    </el-card>

    <el-card :bordered="false" class="mt-3 proCard">
      <el-alert title="多选" type="info" class="mt-3">
        这个看起来，真的像多选，实际也是多选效果哈
      </el-alert>
      <div class="mt-3">
        <el-space align="center">
          <TableSelect
            ref="TableSelectRef"
            labelField="name"
            valueField="id"
            placeholder="请选择内容（多选）"
            :multiple="true"
            :tableProps="{
              rowKey: 'id',
              request: loadDataTable,
              columns: columns,
            }"
            @change="tableSelectChange"
            @form-values-change="formChange"
          />
        </el-space>
      </div>
    </el-card>

    <el-card :bordered="false" class="mt-3 proCard">
      <el-alert title="多选" type="info"> 支持配置表单，搜索查询，多选 </el-alert>
      <div class="mt-3">
        <el-space align="center">
          <TableSelect
            ref="TableSelectRef"
            labelField="name"
            valueField="id"
            placeholder="请选择内容（多选）"
            :multiple="true"
            :formProps="formPropsOption"
            :tableProps="{
              rowKey: 'id',
              request: loadDataTable,
              columns: columns,
            }"
            @change="tableSelectChange"
            @form-values-change="formChange"
          />
        </el-space>
      </div>
    </el-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { TableSelect } from '@/components/TableSelect';
  import { getTableList } from '@/api/table/list';
  import { columns } from './basicColumns';
  import { FormSchema } from '@/components/Form/index';

  const schemas: FormSchema[] = [
    {
      field: 'name',
      labelMessage: '这是一个提示',
      component: 'Input',
      label: '名称',
      componentProps: {
        placeholder: '请输入名称',
        onInput: (e: any) => {
          console.log(e);
        },
      },
      rules: [{ message: '请输入名称', trigger: ['blur'] }],
    },
  ];

  const formPropsOption = {
    layout: 'horizontal',
    colProps: { span: 12 },
    schemas,
  };

  const formParams = ref({});

  const loadDataTable = async (res) => {
    return await getTableList({ ...formParams.value, ...res });
  };

  function tableSelectChange(list) {
    console.log('list', list);
  }

  function formChange(values) {
    formParams.value = values;
  }
</script>