Vue --自定义el-table-column头部的两种方法

Posted 2023-04-24

参考技术A 1.在<el-table-column>上定义:render-header调用自定义表头方法，如图举例

2.在methods：方法里面自定义表头方法，如图举例

1.在<el-table-column>上使用scoped-slot

2.<template>绑定slot,然后自定义你所需要的内容

如图举例

vue3对比vue2

参考技术A

1.vue3中template支持多个根标签
2.main.js
3. setup （取代data methods） ref
4. v-model在组件中的运用
5.新组件 Teleport

虽然，但是
在用ant-design-vue搭的架子中，如果使用了多个根标签，跳转页面之后会出现白板，重新刷新页面之后才正常显示。（也不知道是哪的问题，就。。还是用一个根标签吧。

createApp( 组件 )与new Vue( template,render )

setup函数返回一个对象，这个对象中包含方法和数据，生命周期钩子函数也在setup中运行，取代的是vue2中的data，methods。
ref类型的数据，是一种响应式的数据,待续

vue2组件通信

vue3使用v-model组件通信

相当于子组件中的pVisible与父组件中的isVisible双向绑定了，比vue2传统方法简化很多。

Teleport
有两个div分别是box1和box2，据经验所知，即使box1的孩子el1的z-index为10，el1的层级也没有box2高，一些情况下el1也会被box2遮住（因为即使el1的层级再高，也是在box1的层级下生存），这时候就可以用teleport组件包住el1，使其脱离box1层级的掌控,to表示重新找的爸爸

//待更新。。。