用elementui table的方式理解作用域插槽

首先建三个vue 文件

作用域插槽： 关于作用域插槽,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容

main.vue 主要显示界面

<template>
  <div>
    <my-table :data="tablelist">
      <my-table-column prop="name" label="姓名"></my-table-column>
      <my-table-column prop="sex" label="性别"> </my-table-column>
      <my-table-column label="地址">
        <template v-slot="scope">
          {{scope.row.address+'88888'}}
        </template>
      </my-table-column>
    </my-table>
  </div>
</template>

<script>
import myTable from '../components/my-Table.vue'
import myTableColumn from '../components/my-Table-Column.vue'
export default {
  name: 'main',
  data () {
    return {
      tablelist: [
        {
          name: 'chenxuelan1',
          sex: '女',
          address: '上海1'
        },
        {
          name: 'chenxuelan2',
          sex: '女',
          address: '上海2'
        },
        {
          name: 'chenxuelan3',
          sex: '女',
          address: '上海3'
        },
        {
          name: 'chenxuelan4',
          sex: '女',
          address: '上海4'
        }
      ]
    }
  },
  components: { myTable, myTableColumn },
  methods: {},
  mounted () {}
}
</script>

 

 

 

my-Table.vue组件页面，里面放了默认插槽，显示列的信息

<template>
  <div class="myTable">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'my-Table',
  data () {
    return {

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

<style>
</style>

 

 

 

my-Table-Column.vue组件页面，里面放入作用域插槽，数据对象返回给父组件

<template>
  <div>
   <div v-for="(user,index) in $parent.$parent.tablelist" :key="index">
     <span v-if="prop">{{user[prop]}}</span>
    <slot v-else :row="user"></slot>
   </div>
 </div>
</template>

<script>
export default {
  name: 'my-Table-Column',
  data () {
    return {
    }
  },
  props: {
    prop: {type: String},
    label: {type: String}
  },
  components: {
  },
  methods: {

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

<style>
</style>