1. 表格字段改为自定义标签元素

• 表格区域：

  

  • 先在字段项配置slots，slots: { customRender: '插槽名称' }
  • 然后在html区域根据对应名称定义自己想要的标签或者添加操作

  // 字段配置 slots
  const columns = [
    {
      title: '样品类型',
      dataIndex: 'sampleTypeName',
      width: 120,
    },
    {
      title: '检测设备',
      dataIndex: 'testEquipment',
      slots: { customRender: 'equipment' },
      width: 120,
    },
    {
      title: '检测标准',
      dataIndex: 'testStand',
      slots: { customRender: 'stand' },
      width: 120,
    },
   ]
   // html 区域 第一种写法 不需要数据传入，只改变标签
   <!-- Facebook tag标签 -->
  <template #equipment>
     <Tag color="#3b5999">
      <template #icon>
        <facebook-outlined />
      </template>
      Facebook
    </Tag>
  </template>
  <!-- Twitter tag标签 -->
  <template #stand>
     <Tag color="#55acee">
      <template #icon>
        <twitter-outlined />
      </template>
      Twitter
    </Tag>
  </template>
  
  // html 区域 第二种写法 需要对数据简单处理或者需要根据某个字段数据做出调整、添加操作等
  // 状态
  <template #status="{ record }">
       {{ publicFun.matchLabel(record.status, statusList) }}
  </template>
  <template #equipment="{ record }">
     <div class="row-slot" @click="showEquipment(record)"> 查看设备 </div>
  </template>
  <!-- 检测标准 -->
  <template #stand="{ record }">
     <div class="row-slot" @click="showStand(record)"> 查看标准 </div>
  </template>

• 表单区域

  

  • 先在字段项配置slot，slot: '插槽名称'
  • 然后在html区域根据名称定义需要的标签或者修改操作，注：插槽名称前需要加form-前缀，表格中配置表单才需要加，表单中配置不需要加
  • 自定义的字段需要配置搜索值，否则不生效

  // 字段配置 slot
  const addFormSchema = [
    {
      field: 'sampleTypeName',
      label: '样品类型',
      component: 'Input',
      required: true,
      colProps: { span: 12 },
      slot: 'sampleType'
    },
    {
      field: 'sampleName',
      label: '样品名称',
      component: 'Input',
      required: true,
      colProps: { span: 12 },
      componentProps: {
        autoComplete: 'off',
      },
    },
   ]
   
   // html 区域
   <!-- 样品选择 -->
  <template #form-samName>
     <Cascader
      v-model:value="samName"
      :options="treeData"
      :show-search="{ filter, matchInputWidth: false }"
      @change="getSelectedKeys"
      placeholder="请选择样品"
    />
  </template>
  
  // js 区域
  // 重置，只需要配置自定义的值就行
  const resetFunc = () => {
    samName.value = undefined;
  };
  const [registerTable, { reload, getForm }] = useTable({
     api: getList,
     columns,
     dataSource,
     formConfig: {
        labelWidth: 80,
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        resetFunc: resetFunc,  // 需要配置重置方法
      },
      useSearchForm: true,
      canResize: true,
      bordered: false,
      showIndexColumn: true,
      actionColumn: {
      width: 120,
         title: '操作',
         dataIndex: 'action',
         slots: { customRender: 'action' },
      },
      // 调接口之前对传参进行调整，自定义的字段项传入绑定的值
      beforeFetch: (res) => {
         res.sampleTypeName = samName.value;
         return res;
       },
  });

2. 表单字段自定义

• 字段配置slot，slot: '插槽名称',
• html区域定义所需定制

• js中赋值并手动调用校验

  // 表单
  export const editFormSchema: FormSchema[] = [
    {
      field: 'deviceName',
      label: '检测设备',
      component: 'Input',
      colProps: { span: 12 },
      required: true,
      slot:'devName',
    },
    {
      field: '[startTime, endTime]',
      label: "使用时间",
      component: 'RangePicker',
      colProps: { span: 12 },
      componentProps: {
        valueFormat: 'YYYY-MM-DD',
        placeholder: ['开始时间', '结束时间'],
      },
    },
   ]
  
  // html
  <template #devName>
     <CheckboxGroup v-model:value="jcsbList" @change="jcsbChange">
         <template v-for="item in jcsbOptions" :key="item.value">
            <Checkbox :value="item.value">{{ item.label }}</Checkbox>
         </template>
     </CheckboxGroup>
   </template>
   
  // js
  const jcsbOptions = ref([]);
  const jcsbList = ref([]);
  // 查询检测设备数据
  const getEquipm = async () => {
     let res = await getEquipment({});
     if (res) {
        res.items.forEach((item) => {
          let data = {
             value: item.deviceId,
             label: item.deviceName,
          };
          jcsbOptions.value.push(data);
        });
     }
  };
  // 格式化数据
  const jcsbFormat = () => {
     let jcsbData = [];
     jcsbList.value.forEach((item) => {
         let data = {
            deviceId: item,
          };
          jcsbData.push(data);
     });
      return jcsbData;
  };
  // 检测设备改变
  const jcsbChange = (d) => {
    // 手动校验
     setTimeout(() => {
        setFieldsValue({
           deviceInfoList: jcsbFormat(),
        });
     }, 100);
  };

  

3. 可勾选表格数据回填

• 表格配置项配置：

  • rowSelection: { type: 'checkbox' }，勾选框
  • rowKey: linkType，勾选的根据，如根据 id、编号、名称...来勾选（需要保持唯一）
  • clearSelectedRowKeys()，页面初始化清除勾选
  • setSelectedRowKeys(['id1','id2])，回填数据的id数组（勾选根据对应的字段数据）

  // 页面初始化时
  clearSelectedRowKeys();
  setSelectedRowKeys(value.listId);
  // 表格配置项
  const [registerTable, { getSelectRows, clearSelectedRowKeys, setSelectedRowKeys, reload }] =
      useTable({
      api: apis,
      rowKey: linkType, // 勾选的字段，固定的设置为字符串即可，动态改变的可以用变量接收，不需要`.value`
      columns: column,
      dataSource: equipData,
      formConfig: {
          labelWidth: 80,
          schemas: searchForm,
          autoSubmitOnEnter: true,
          resetFunc: resetFunc,
      },
      useSearchForm: true,
      rowSelection: { type: 'checkbox' },
      clickToRowSelect: true,
      showTableSetting: false, //控制刷新，密度，列设置按钮的显示
      bordered: true,
      showIndexColumn: false,
      maxHeight: 400,
      beforeFetch: (res) => {},
      afterFetch: (res) => {},
  });

4. 关于弹窗和抽屉

• 不能绑key：会导致组件未加载出来而报错

  // html
  <BasicModal
      v-bind="$attrs"
      @register="registerModal"
      title="关联"
      width="50%"
      minHeight="500"
      @ok="handleConfirm"
      @close="handleClose"
      :key="newkey"
  >
  抽屉内容！
  </BasicModal>
  
  // js
  const newKey = ref(new Date().getTime());

5. 弹窗或抽屉中使用表格或表单

• 每次打开需要刷新，可以在组件初始化时调用表格刷新方法：reload()，调用表单时使用resetFields()，不能在组件未初始化时调用，否则会导致报错

• 如果仍有报实例未初始化错误，可以写在nextTick函数里

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
          isAction.value = data?.isAction;
          newKey.value = new Date().getTime();
          sampleType.value = '';
          if (isAction.value == '模板') {
            setDrawerProps({ showFooter: true, title: '查看报告模板' });
            isTemplate.value = true;
            nextTick(() => {
              reload();
            });
          } else {
            isTemplate.value = false;
            if (isAction.value == '详情') {
              schema.value = viewFormSchema;
              setDrawerProps({ showFooter: false, title: '详情' });
            } else if (isAction.value == '新增') {
              schema.value = editFormSchema;
              setDrawerProps({ showFooter: true, title: '模板新增' });
            } else if (isAction.value == '编辑') {
              schema.value = editFormSchema;
              setDrawerProps({ showFooter: true, title: '编辑模板' });
            }
            nextTick(() => {
              if (!isTemplate.value) {
                resetFields();
                setFieldsValue({
                  ...data.record,
                });
              }
            });
          }
        });