component.md 1.3 KB

[TOC]

OCA自定义组件

级联

YuTableTag-列表自定义tag标签列

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: ''
    }
  }
}