Element: table column建议添加render-content

Created on 17 Mar 2017 · 6Comments · Source: ElemeFE/element

既然render-header可以有，为什么render-content不能有？虽然说可以使用可以来渲染column里的内容，但是还是有些情况需要通过程序控制配置column的呈现方式，所以建议加上render-content

Source

qwvpn

Most helpful comment

@QingWei-Li 感谢大大，之前不知道有scoped slots，刚才试了一下，不是很理解为什么要把代理渲染的组件夹在之间。小弟目前在做一个后台管理通用搜索模块，直接上代码,如果有类似需求的可以参考一下:
通用搜索表格组件里:

<el-table-column v-for="item in content.table.columns"
                             :prop="item.prop"
                             :sortable="item.sortable ? 'custom': false"
                             :align="item.align"
                             :label="item.label"
                             :width="item.width">
                <template scope="scope">
                  <we-table-customcolumn :renderContent="item.render" :scope="scope" :prop="item.prop"></we-table-customcolumn>
                </template>
</el-table-column>

在we-table-customcolumn里:

export default {
  props: {
    renderContent: Function,
    scope: Object,
    prop: String
  },
  render (h) {
    const prop = this.prop;
    const scope = this.scope;
    return (
      this.renderContent
        ? this.renderContent.call(this._renderProxy, h, { row: scope.row })
        : (
          <span>{ scope.row[prop] }</span>
        )
    );
  }
}

然后content.table.columns的值如下:

{ prop: 'shopAddress', align: 'center', label: '店铺地址' },
{ prop: 'machineSum', align: 'center', label: '机器数量' },
{
            prop: 'netFlag',
            align: 'center',
            label: '网店开关',
            render (h, row) {
              return (
                  <span>{row.netFlag ? '开' : '关'}</span>
              );
            }
}

Telanx on 21 Mar 2017

👍5

All 6 comments

请自己看 Vue 文档了解 JSX 的写法

Hi,

请不要滥用 Issue，这里只处理 Bug 和 Feature，提交前请参考 Issue 规范，同时按照 Issue 模板填写内容。不符合规范的 Issue 将直接关闭；
有问题请到 Gitter 里问，提问前可以先阅读 FAQ。

QingWei-Li on 17 Mar 2017

@QingWei-Li 这个不是【tree】里的render-content，而是table-column里，table-column里可在模板里用

Element: table column建议添加render-content

Most helpful comment

All 6 comments

Related issues