在使用具名插槽时,请确保slot、template标签单词没有拼错,基本上不会出现失效问题,切勿拼成solt、tempalte。
网上关于使用v-for给 slot 动态赋值 name 属性的相关问题较少,因此我在实践后,可以给大家一个确定的答案,动态生成具名插槽是可行的。
//子组件 v-for数据源 list = [ {label:'合同编号',prop:'contract.docno'}, {label:'合同名称',prop:'contract.name'}, {label:'用工企业',prop:'company.companyName'}, {label:'发起主体',prop:'comanySalaryName'}, {label:'创建时间',prop:'contract.createdate'}, ] <template v-for="(item,i) in tableData?tableData.cols:[]"> <el-table-column :key="i" :prop="item.prop" :label="item.label"> <template slot-scope="scope"> //v-for动态生成具名插槽 <slot :name="item.prop" :rowData="scope.row"> {{item.prop.includes('.')?scope.row[item.prop.split('.')[0]][item.prop.split('.')[1]]:scope.row[item.prop]}} </slot> </template> </el-table-column> </template>
//父组件中的子组件
//下方$iApi为 自定义封装插件
<son>
// tip:#contract.createdate==>v-slot:contract.createdate #等同于v-slot
<template #contract.createdate="{rowData:rowData}">
{{$iApi.moment(rowData.contract.createdate,'YYYY-MM-DD HH:mm:ss')}}
</template>
</son>