vue通过jxs来二次构建elemnt-ui table

最新推荐文章于 2023-12-29 15:56:42 发布

说改就改

最新推荐文章于 2023-12-29 15:56:42 发布

阅读量316

点赞数

文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/qq_42749720/article/details/126952834

版权

<script>
export default {
  props: {
  data: {
      type: Array,
      default: () => []
    },
    // 根据element-ui cloumn参数一致
    columnConfigList: {
      type: Array,
      default: () => []
    }
  },
  render() {
    return (
      // table表格
      <el-table
        data={this.data}
        {...{
          props: {
			...this.$attrs
			},
          on: this.$listeners,
          ref: 'table'
        }}
      >
        {this.generateColumnList(this.columnConfigList)}
      </el-table>
    )
  },
  methods: {
    generateColumnList(columnConfigList) {
      const columnListVDom = []
      columnConfigList.forEach(item => {
        columnListVDom.push(this.generateColumnItem(item))
      })
      return columnListVDom
    },
    generateColumnItem(props) {
      const scopedSlots = props.slot
        ? { default: this.$scopedSlots[props.slot] }
        : {}
      return (
        <el-table-column {...{ props, scopedSlots }}>
          { this.generateColumnList(props.columnConfigList)}
        </el-table-column>
      )
    }
  }
}
</script>

<style lang="scss" scoped></style>