list + colums

<template>
  <div>
    <test3 :list="list" :columns="columns"/>
  </div>
</template>

<script>

import Test3 from "@/views/test/xys/test3";
import MyImg from "@/views/test/xys/my-img";
import Test12 from "@/views/test/xys/test12";
import MyTxt from "@/views/test/xys/my-txt";


export default {
  name: '',
  components: {MyTxt, Test12, Test3},
  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'},
      ],
      columns: [
        {fieldName: '名称', field: 'name'},
        {fieldName: '年龄', field: 'age'},
        {
          fieldName: '头像', field: 'img',
          componentName: {
            props: {
              value: {}
            },
            data: function () {
              return {
                title: 'tttttt'
              }
            },
            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,
                  {
                    scopedSlots: {
                      // default: props => createElement('span', props.name)
                      default: props => createElement(MyTxt, {props: {value: props.name}})
                    }
                  },
                  []
                ),

              ])

              // return []
            }
          }
        },
      ]


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

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


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

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

<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'" :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: 'test3',
  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>