table + columns

调用处

<template>
  <div>
    <xys-table :list="list" :columns="columns"/>
  </div>
</template>

<script>

import Test12 from "@/views/test/xys/test12";
import XysTable from "@/components-xys/xys-table/index.vue";


export default {
  name: '',
  components: {XysTable, Test12},
  data() {
    return {
      list: [
        {id: 1, name: 'aaa', age: 11, img: 'http://localhost:9409/assets/img/qrcode.png'},
        {id: 2, name: 'bbb', age: 12, img: 'http://localhost:9409/assets/img/qrcode.png'},
        {id: 3, name: 'ccc', age: 13, img: 'http://localhost:9409/assets/img/qrcode.png'},
        {id: 4, name: 'ddd', age: 14, img: 'http://localhost:9409/assets/img/qrcode.png'},
        {id: 5, name: 'eee', age: 15, img: 'http://localhost:9409/assets/img/qrcode.png'},
      ],

      // 方式1
      columns: [
        {fieldName: '名称', field: 'name'},
        {fieldName: '年龄', field: 'age'},
        {
          fieldName: '头像', field: 'img',
          componentName: {
            props: {
              row: {},
              value: {}
            },
            data: function () {
              return {
                title: 'title'
              }
            },
            methods: {
              onClick() {
                console.log('onClick', this.title)
              },
            },
            render(createElement) {
              return createElement('div', {},
                [
                  createElement(
                    'img',
                    {
                      on: {
                        click: this.onClick
                      },
                      attrs: {
                        src: this.value,
                        title: this.title,
                      }
                    },
                    ''
                  ),
                  createElement(
                    Test12,
                    {
                      // test12这个组件中 各个插槽 应该如何渲染，插槽的props是真正使用时v-bind的
                      scopedSlots: {
                        default: props => createElement('span', {}, props.name),
                        someText: props => createElement(
                          'span',
                          {
                            attrs: {
                              title: this.row.id
                            }
                          },
                          'id:' + this.row.id
                        )
                      },

                      // 向test12这个组件 传值
                      props: {
                        value: this.row.name
                      },
                      attrs: {
                        title: '我是test12组件'
                      },
                    },
                    []
                  ),
                ]
              )
            }
          }
        },
      ]

      // 方式2
      // columns: [
      //   {fieldName: '名称', field: 'name'},
      //   {fieldName: '年龄', field: 'age'},
      //   {
      //     fieldName: '头像', field: 'img',
      //     componentName: MyImg
      //   },
      // ]

      // 方式3
      // columns: [
      //   {fieldName: '名称', field: 'name'},
      //   {fieldName: '年龄', field: 'age'},
      //   {fieldName: '头像', field: 'img', componentName: 'my-img'},
      // ]


    }
  },
  mounted() {
  },
  methods: {}
}
</script>

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

组件 xys-table

<template>
  <div>
    <table>
      <tr>
        <template v-for="column in columns">
          <td>{{ column.fieldName }}</td>
        </template>
      </tr>

      <template v-for="row in list">
        <tr>
          <template v-for="column in columns">
            <td>
              <component :is="column.componentName || 'my-txt'" :row="row" :value="row[column.field]"></component>
            </td>
          </template>
        </tr>
      </template>

    </table>
  </div>
</template>

<script>

import MyImg from "@/views/test/xys/my-img";
import MyTxt from "@/views/test/xys/my-txt";

export default {
  name: 'xys-table',
  components: {MyTxt, MyImg},
  props: {
    list: {
      type: Array,
      default: function () {
        return []
      }
    },
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
table {
  width: 500px;
  table-layout: auto;
  border-collapse: collapse;
}

table td {
  border: 1px solid grey;
}
</style>

组件 test12

<template>
  <div>
    <h2>myName is test12,props.value:{{ value }}</h2>
    <div>
      这里是slot-default
      <div>
        <slot v-bind="{name:'abc'}"/>
      </div>
    </div>
    <div>
      这里是slot-someText
      <div>
        <slot name="someText"/>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'test12',
  props: {
    value: null
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {}
}
</script>

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