企企通产品部V6

Appearance

On this page

列表模板插槽使用 ​

列表头部插槽 ​

列表头部模块插槽，列表头部前插槽，列表头查询模块插槽，查询自定义字段插槽，快速导航插槽，状态插槽（前后），表格前插槽

vue
<!-- ...省略其他代码 -->  
<q-list-layout  ref="listLayoutRef" :apiUrls="apiUrls" :pageData="pageData">
      <!-- 列表头部 -->
      <template #header="{ loading, tableColumns, tableData, pagerConfig, queryConfig, statusData, listConfig }">
        列表头部插槽
        {{ loading }}
        {{ tableColumns }}
        {{ tableData }}
        {{ pagerConfig }}
        {{ queryConfig }}
        {{ statusData }}
        {{ listConfig }}
      </template>
      <template #header_append> 列表头部后面追加插槽 </template>

      <!-- 列表表格 -->
      <template #gridlist="{ loading, tableColumns, tableData, pagerConfig, queryConfig, statusData, listConfig }">
        列表列表模块插槽
        {{ loading }}
        {{ tableColumns }}
        {{ tableData }}
        {{ pagerConfig }}
        {{ queryConfig }}
        {{ statusData }}
        {{ listConfig }}
      </template>
      <template #grid_prepend> 表格前插槽内容 </template>

      <!-- 查询 -->
      <template #header_query="{ form, formState }">查询模块插槽{{ form }}{{ formState }}</template>
      <template #header_query_form_custom="{ form, formState }">查询字段自定义插槽{{ form }}{{ formState }}</template>

      <!-- 状态 -->
      <template #header_status_append="{ statusData }">
        <div class="status-append">状态后插槽, 数据{{ statusData }}</div>
      </template>
      <template #header_status_prepend="{ statusData }">
        <div class="status-prepend">状态前插槽, 数据{{ statusData }}</div>
      </template>
      <template #header_status="statusData">
        <div class="status-prepend">状态模块插槽, 数据{{ statusData }}</div>
      </template>
    
    	 <!-- 快速导航 -->
      <template #header_quick_nav>
        <div>快速导航插槽</div>
      </template>
    </q-list-layout>

<!-- ...省略其他代码 -->

说明：因为列表头部是有折叠功能的，如果使用插槽后，样式影响折叠效果，可以配置foldIconHide 隐藏折叠图标

js
const pageData = reactive({

 foldIconHide: false,

// ... 省略其他代码

}

列表表格字段插槽--自定义渲染 ​

可以在beforeHandleData 钩子里面重写对应字段格式，scopedSlots 的是一个对象，下面是个例子：

js
// ...省略其他代码
<q-list-layout :beforeHandleData="beforeHandleData" ref="listLayoutRef" = />

// ...省略其他代码
// 冻结功能插槽，实现按钮弹窗
const beforeHandleData = (col: GlobalListPageLayoutTypes.GridColumn) => {
  col.forEach((rs) => {
    if (rs.dataIndex === 'frozenFunction') {
      rs.scopedSlots = {
        default({ row, column }: { row: GlobalListPageLayoutTypes.CurrentRow; column: GlobalListPageLayoutTypes.GridColumn }) {
          return (
            <a-button
              type="link"
            >
              {srmI18n(`i18n_field_mARH_31060cbe`, '查看明细')}
            </a-button>
          )
        },
      }
    }
  })
}

列表表格字段插槽--可编辑 ​

如果列表表格需要自定义插槽，并且可编辑，在写自定义slots的同时，还需要配置editConfig

js
// ...省略其他代码
<q-list-layout 
	:beforeHandleData="beforeHandleData"
	ref="listLayoutRef" 
	:extraListConfig="{
      editConfig: {
        trigger: 'dblclick',
        mode: 'cell',
        showStatus: true,
      },
    }"
/>

// ...省略其他代码
// 当前列 字段可编辑
const beforeHandleData = (col: GlobalListPageLayoutTypes.GridColumn) => {
  col.forEach((rs) => {
    if (rs.dataIndex === 'frozenFunction') {
      rs.scopedSlots = {
        default({ row, column }: { row: GlobalListPageLayoutTypes.CurrentRow; column: GlobalListPageLayoutTypes.GridColumn }) {
          return row[column.field]
        },
        edit({ row, column }: { row: GlobalListPageLayoutTypes.CurrentRow; column: GlobalListPageLayoutTypes.GridColumn }) {
          return <a-input v-model:value={row[column.field]} />
        },    
      }
    }
  })
}

列表查询字段自定义插槽-特别说明 ​

查询字段自定义查询使用，只需要绑定到formState里即可，重置按钮的时候也需要把对应的清除，需要在queryConfig--》form，补充类型type为slot，

下面是如何操作的示例代码

vue
<!-- ...省略其他代码 -->  
<q-list-layout  ref="listLayoutRef" :apiUrls="apiUrls" :pageData="pageData">
     <template #header_query_form_custom="{ formState }">
      <a-date-picker valueFormat="YYYY-MM-DD hh:mm:ss" v-model:value="formState.generationTime" />
    </template>
</q-list-layout>

<!-- ...省略其他代码 -->
const pageData = reactive<GlobalListPageLayoutTypes.PageData>({
    queryConfig: {
        form: [
          {
            type: 'slot', // 需要把类型改为slot
            label: '日期',
            fieldName: 'generationTime',
          },
        ],
      },
    })
<!-- ...省略其他代码 -->

注意：重置按钮-默认是把对应的formState的对象赋值为空，如不满足业务可以配置customReset方法，绑定自定义重置方法

js
<!-- ...省略其他代码 -->
const pageData = reactive<GlobalListPageLayoutTypes.PageData>({
    queryConfig: {
    	customReset: (formState) => {
    	  // 清空逻辑
          formState.generationTime = null
        },
        form: [
          {
            type: 'slot', // 需要把类型改为slot
            label: '日期',
            fieldName: 'generationTime',
          },
        ],
      },
    })
<!-- ...省略其他代码 -->