table.md 1.5 KB

[TOC]

列表

1. 格式化

formatter格式化

目前所有提供的自定义格式化方法:src\utils\formatter.js

非低码:

直接调用 :formatter="moneyFormatter"

低码:

选择自定义格式化

列表自定义列为tag标签,对应组件YuTableTag

src\components\widgets\YuTableTag\index.vue,已注册为全局组件

非低码:

<yu-xtable-column prop="loginSts" label="登录状态" width="100px">
  <template slot-scope="scope">
    <!-- 默认配置[是否启用]字典项 -->
    <yu-table-tag :code="scope.row.loginSts"></yu-table-tag>
    <!-- [是否STD_YES_NO]字典项:配置yesno属性 -->
    <yu-table-tag :code="scope.row.loginSts" yesno></yu-table-tag>
    <!-- 其他:配置data-code、code-map属性 -->
    <yu-table-tag :code="scope.row.loginSts" data-code="USR_STS" :code-map="{1: 'success', 2: 'danger', 3: 'warning'}"></yu-table-tag>
  </template>
</yu-xtable-column>

低码:

需要为表格的相应列renderCustom事件绑定一个函数,当前demo绑定的函数为renderLoginSts

/**
 * 自定义登录状态操作列
 */
function renderLoginSts() {
  return {
    xtype: 'custom', // 自定义列固定写法
    xtag: 'yu-table-tag', // 自定义组件的name,当前为yu-table-tag
    xprops: { // 自定义组件传参,当前对应yu-table-tag中的props,用法同非低码,默认为 是否启用字典项,如需自定义传参则在里面传参配置
      // dataCode: ''
    }
  }
}