Table表格

注：app-table是对el-table的封装

<app-table 
  :loading="loading" 
  v-model:searchEvent="searchEvent" 
  @search="search"
  @rowDblclick="onRowDbClick" 
  @selectionChange="onSelectionChange" 
  :columns="columns" 
  :data="data"
  show-page></app-table>

定义列属性

列属性将透传给el-table-column，所以可以根据element-plus文档中的列属性进行设置

// 定义表格
const defineColumns = [
  {
    prop: "createTime",
    label: "创建时间",
    width: 180,
    align: 'center',
    headerRender: () => {
      return h('div', {}, '自定义表头')
    }
  },
];

获取选中行信息

// 方法一
<app-table @search="search" @selectionChange="selectionChange" :columns="columns" :data="data"></app-table>

let selection: Array<any> = []

const selectionChange = (rows: any) => selection = rows

// 方法二
<app-table @search="search" v-model:selection="selection" :columns="columns" :data="data"></app-table>

let selection: Array<any> = []

重新计算高度

当界面调整（例：由不可见变为可见，或外部元素大小变更，造成table高度不能自适应时，可重新计算table高度）

// 定义table
<app-table ref="table"></app-table>

// 重新计算高度
table.value.calculateTableHeight()

显示统计列

<app-table :show-summary="true" :sumData="sumData"></app-table>

const sumData = ref({})

const search = async () => {
  sumData.value = { sumText: '合计', createTime: 50 } // 统计数据
};

// 定义的列信息中：
{
  prop: "paymentCode2",
  label: "渠道编码1",
  width: 150,
  align: "center",
  sortable: true,
  showSummary: true,    // 此处需定义为显示统计
  summaryFormatType: EnumSummaryFormatType.money_2, // 格式化：保留两位小数
  template: {
    type: AppTableTemplateType.string,
    showCopy: true,
    showLink: true,
    linkFunc: () => console.log('xxxxx')
  }
},

显示多级表头

// 列表定义使用以下定义：

{
    prop: "paymentCode",
    label: "渠道编码",
    width: 150,
    align: "center",
    columns: [
      {
        prop: "paymentCode",
        label: "渠道编码1",
        width: 150,
        align: "center",
        sortable: true,
        template: {
          type: AppTableTemplateType.string,
          showCopy: true,
          showLink: true,
          linkFunc: () => console.log('xxxxx')
        }
      },
      {
        prop: "paymentCode",
        label: "渠道编码2",
        width: 150,
        align: "center",
        sortable: true,
        template: {
          type: AppTableTemplateType.string,
          showCopy: true,
          showLink: true,
          linkFunc: () => console.log('xxxxx')
        }
      },
    ]
  },

使用内置模版

“使用内置模版”是指通过不同的类型，来使用内置的模版显示，模板包括更多扩展功能

时间模板

{
  prop: "createTime",
  label: "创建时间",
  width: 180,
  align: "center",
  sortable: true,
  template: {
    type: AppTableTemplateType.datetime, // 时间模板将自动使用“yyyy-MM-dd HH:mm:ss”格式进行显示
    format: 'YYYY-MM-DD' // 此属性可省略，如需自定义格式，则设置此字段
  }
}

字符串模板

{
  prop: "paymentCode",
  label: "渠道编码",
  width: 150,
  align: "left",
  sortable: true,
  template: {
    type: AppTableTemplateType.string,
    showCopy: true, // 是否显示复制功能
    showLink: false, // 显示为link链接模式
    linkFunc: null, // 当为link模式时，点击激发的方法，
    drawerComponentName: 'Member_MemberLevelEdit', // 点击link时，要弹出的抽屉组件名，该属性与linkFunc只能二选一。两者均设置，优先使用linkFunc
  }
}

枚举模板

{
  prop: "type",
  label: "枚举类型",
  width: 150,
  align: "left",
  sortable: true,
  template: {
    type: AppTableTemplateType.enum,
    enumType: TestEnum // 要显示的枚举类型,
    tagTypeOptions: [   // 设置为tag模式，并设置枚举值所对应的颜色
      { key: TestEnum.汽车, value: 'success' },
      { key: TestEnum.火车, value: 'danger' },
      { key: TestEnum.自行车, value: 'info' },
    ]
  }
},

bool模板

{
    prop: "isSystem",
    label: "内置渠道",
    width: 120,
    align: "center",
    sortable: true,
    template: {
      type: AppTableTemplateType.boolean,
      trueLabel: '启用', // 为真时显示的文本，如不设置则显示“是”
      falseLabel: '禁用'  // 为假时显示的文本，如不设置则显示"否"
    },
  },

分页保留选中

增加 ro-key-name="唯一键"

<app-table ref="table" 
              :loading="loading" 
              v-model:searchEvent="searchEvent" 
              v-model:selection="selections" 
              :show-summary="true"
              @search="search" 
              :columns="defineColumns" 
              :data="data"
              :sumData="sumData"
              :showExport="true"
              row-key-name="id"
              show-page></app-table>

定义表格列，增加reserveSelection属性

const defineColumns = [
  {
    type: "selection",
    align: 'center',
    width: 50,
    reserveSelection: true,
  },
  ......
]

列管理功能

• show-column-manager: 启用列管理功能
• 【重要】identity: 全局唯一键，标识table全局唯一，避免设置冲突。建议：包名+功能
• 注：仅当上述两个属性均设置时，才会显示列管理按钮(表格右下角)

<app-table identity="SetMeal_CoinSetMealSetting" show-column-manager></app-table>

注：列管理设置后，按账户级别保存到后台中，每个列以prop为唯一键，如果多个列有相同的prop，则可以增加设置key，则以key为唯一键。

页脚异步统计

当统计数量较大时，页脚汇总会增大查询延时，异步统计将页面数据和页脚统计数据分开返回，以提高查询效率。

• 当页显示数据会即时返回。
• 页面总计和分页数据会即时返回。
• 页脚汇总数据会显示为“统计中”，然后异步返回。

改造：请求数据中需增加两个字段：

• isAsyncFoot：是否使用异步页脚统计，如为false或者不填，则使用同步返回。
• asyncBizCode：异步使用的bizcode，后续table会自动根据此code异步从服务器查询统计结果。

const search = async () => {  
    // ...... 其他代码
    let request = {
      ......
      isAsyncFoot: true,                            // 是否使用异步页脚统计
      asyncBizCode: table.value.computerBizCode()   // 异步统计通信时使用的bizcode
    }
    const res: HttpResult<any> = await jingjian.https.get(searchUrl, request)
    if (!res.success) throw new Error(res.msg)

    data.value = res.data
    searchEvent.value.pageContent.totalRecords = (<any>res).totals
    sumData.value = res.footData
    // ...... 其他代码
};

<app-table ref="table" 
              v-model:sum-data="sumData" <!-- 增加此行 -->
              :sum-data="sumData" <!-- 去除此行 -->
              ></app-table>

服务端：

• 如果使用快速查询QuickFootQueryAsync，则不需要更改代码。
• 如果使用ToFootCallResultAsync方法，则需要传入参数:

input.isAsyncFoot 和 input.asyncBizCode