1. Requirements: iview's table component provides a way to customize column templates. Use slot-scop to deconstruct the data items we need, which greatly facilitates our development. Now we use vue3.x v-slot to upgrade This way of writing custom column templates.
2. Sub-component, name the name of each item of data on the slot, and define the attribute to pass in the corresponding data item
<template>
<ul>
<li v-for="item in data">
<slot :name="item.slot" :row="item"></slot>
</li>
</ul>
</template>
<script>
import {
ref } from 'vue'
export default {
props:{
data:{
type:Array,
default:()=>[]
}
},
}
</script>
3. The parent component, according to v-slot:xxx to obtain the slot of the xxx item and deconstruct the corresponding attribute to obtain the data
<template>
<div>
<test4 :data="data1">
<template v-slot:name1="{row}">
<span>{
{
row.name}}</span>
</template>
</test4>
</div>
</template>
<script>
import test4 from '@/components/test4'
import {
ref} from 'vue'
export default {
components:{
test4},
setup(){
return{
data1:ref([
{
name:'lisi',age:23,slot:"name1"},
{
name:'zhangsan',age:11,slot:'name2'},
])
}
}
}
</script>
The page results are as expected
