vue如何使用v-for和v-if来自定义组件封装element el-table，更好地实现列的自动渲染？

• Z时代
• 2024-02-13
• 分类：IT

要用封装element的el-table组件，实现根据json对象自动渲染列。有两个方式封装。如果只封装列的渲染，在el-table标签内部使用。类似以下格式

<el-table>
<!-- 我的组件 -->
<my-columns :columns="columns" >
<el-table>

Vue.component('my-columns', {
    // 声明 props
    props: ['columns'],
    template: `
    <el-table-column      v-for="(item,index) in columns" 
        :label="item.label+':'+index" 
        :sortable="item.sort" 
        :width="item.width"
        :prop="item.key"
        >
    </el-table-column    >
    `
})

以上代码不会显示表格内容，如果加上div，就可以显示表格内容，但这样的话，组件最外层包裹元素，如果用div，就会出现https://blog.csdn.net/shihezh...，所说的问题，不用div，那组件最外层包裹元素，最好那应该用什么呢？

vue对此有没有提供方法解决这方面的方式呢？

回答：

vue-fragment

回答：

不太明白为什么最外层还要一层div，至于el-table的配置属性，你可以去看一下$attrs，也许能解决你的问题

回答：

当template有局限性时那就用render

以上是 vue如何使用v-for和v-if来自定义组件封装element el-table，更好地实现列的自动渲染？ 的全部内容， 来源链接： utcz.com/p/935725.html