element-ui el-table表格使用配置化和render的方式替代template和slot

1,182 阅读1分钟

el-table-render

npm i el-table-render // 安装
  • 帮助你在el-table里面以配置化的写法,并支持render函数,你可以写jsx或render function

  • 后续功能优化中

  • 食用方法

   <ElTableRender :columns="tableColumns" :data="tableData" height="300" />
const tableColumns = [
  {
              prop: 'name',
              label: 名称,
              width: '200px',
              render:(h,{row})=>(
               <div>{row.name}</div>
              ),
              headerRender: (h,props) => (
              <div>customTitle</div>
            )
            }
]
  • 上源码
export default {
  functional: true,
  props: {
    columns: {
      type: Array,
      default: () => []
    }
  },
  render(h, ctx) {
    return h(
      'el-table',
      {
        props: {
          ...ctx.data.attrs
        }
      },
      ctx.props.columns.map(column =>
        h('el-table-column', {
          props: {
            ...column
          },
          scopedSlots: column.type
            ? {}
            : {
              default: props => {
                return column.render ? column.render(h, props) : props.row[column.prop]
              },
              header: props => {
                return column.headerRender ? column.headerRender(h, props) : props.column.label
              }
            }
        })
      )
    )
  }
}