Vue3 + Avue中 Header slot写法

本文主要是介绍Vue3 + Avue中 Header slot写法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

avue示例

<template><avue-crud ref="crud":option="option":data="data"><template #name-header="{column}"><el-tag>{{(column || {}).label}}-{{(column || {}).prop}}</el-tag></template></avue-crud>
</template>
<script>
export default {data () {return {option: {column: [{label: '姓名',prop: 'name',}, {label: '年龄',prop: 'sex'}]},data: [{name: '张三',sex: '男'}, {name: '李四',sex: '女'}],}}
}
</script>

实际开发代码示例

// #totalFeeUnpaidAmount-header   字段名totalFeeUnpaidAmount横杠拼接header<template #totalFeeUnpaidAmount-header>{{ $t('账单总金额') }}<el-tooltipclass="item"effect="dark":content="$t('尾款金额(实付)+扣款返还(实付)')"placement="top-start"><span><iclass="iconfont iconshujujiacang-tishi"style="font-size: 12px; margin-left: 4px"/></span></el-tooltip></template>

这篇关于Vue3 + Avue中 Header slot写法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---