1、如何在js封装
render-cell.js
export default { name: 'render-cell', functional: true, props: { render: Function, }, render: (h, ctx) => { return ctx.props.render(h, ctx.data.attrs) }, }
2、主要挂载全局
main.js 文件
import renderCell from '@/components/render-cell.js' Vue.component('RenderCell', renderCell)
3、如何使用
封装组件 xxx.vue
<template> <gmd-descriptions class="biz-descriptions" :column="2" :bordered="bordered" :colon="false" > <gmd-descriptions-item :label="desc.name" v-for="(desc, index) in columns" :key="index" :span="desc.span" > <render-cell v-if="desc.render" :render="desc.render" :item-key="desc.key" :index="index" :data="data" /> <span v-else>{{ data[desc.key] || emptyText }}</span> </gmd-descriptions-item> </gmd-descriptions> </template>
4、如何在页面使用
xxx.vue 页面
columns: [ { key: 'name', name: '行政区划名称' }, { key: 'code', name: '行政区划编码' }, { key: 'level', name: '行政区划等级', render: (h, { data }) => { return (<span>{divisionLevelMap[data['level']]}</span>) }, }, { key: 'parentName', name: '上级行政区划', render: (h, { data }) => <span>{data['parentName'] || '-'}</span>, }, { key: 'pos', name: '排序权限' }, {}, ],
