使用vue的时候经常会遇到以下情况，比如
<el-table-column prop="createYmd" label="入驻日期" align="center" :formatter="renderYmd"></el-table-column>
<el-table-column label="商户名称">
<template slot-scope="scope">
<el-button type="text" @click="viewMerchant(scope.row)">{{scope.row.name}}</el-button>
</template>
</el-table-column>
<el-table-column prop="districtCode" label="省市区县" :formatter="renderDistrictCode"></el-table-column>
<el-table-column prop="managerName" label="管理员姓名"></el-table-column>
<el-table-column prop="managerPhone" label="管理员手机" :formatter="renderPhone"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
这时可以改成
<template v-for="(column,index) in columns">
<GridColumn :column="column" :key="column.dataIndex" :pk="index"></GridColumn>
</template>
也即把各种formatter 包到GridColumn 里
这时遇到一个问题 如果列需要自定义怎么办
可以这样：
在column 里面定义render:
然后GridColumn的render里：
自定义可以了
各大前端组件库
中
都存在table组件，均支持
slot
插槽和
render
渲染，现在就试着探究其
中
原理：
table导航基本列表
使用
render
函数渲染
使用
slot
-
scope
自定义同时
使用
render
和
slot
-
scope
自定义
首先制定表格API。表格分为表头thead和数据tbody，所以props也定义为两部分：
columns: 列配置Array,每一列均为Object：
- title: 列文字
- key: 对应列内容字段名称
-
render
: 渲染函数
-
slot
：插槽名称
render
中
slot
的一般默认
使用
方式如下： this.$
slot
s.default 对用
template
的<
slot
>的
使用
没有name 。 想
使用
多个
slot
的话。需要对
slot
命名唯一。
在
render
函数
中
动态
使用
多个
slot
，并且给
slot
传值
一、我的业务逻辑：
使用
了三个组件，
组件A调用组件B，组件B调用组件C，组件C是自己...
什么是插槽？
插槽就是子组件
中
的提供给父组件
使用
的一个占位符，用 表示，父组件可以在这个占位符
中
填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制
如下代码：
在子组件
中
放一个占位符
在父组件
中
给这个占位符填充内容：
展示的效果:
现在来看看，如果子组件
中
没有放插槽，同样的父组件
中
在子组件
中
填充内容，会是啥样的：
子组件代码无插槽：
2. 父组件照常填充内容：
3. 展示的效果：
总结：如果
最近研究了
vue
的官方文档,到组件自定义渲染函数时,对第二个属性对象参数
中
的
scope
d
Slot
s不太明白作用是什么,官网的案例也是一笔带过,于是连查带试算是明白了他的作用,这里记录一下,希望能帮到遇到相同问题的童鞋.
先说一下函数
中
的$
slot
s吧,这个用起来很简单,直接获取到组件
中
对应的插槽虚拟节点.this.$
slot
s.插槽名称.
废话少说,直接上代码:
<div id="a...
createElement 参数
Vue
中
的
Render
函数
中
有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。
Render
函数将createElement的返回值放到了HTML
中
createElement这个函数
中
有3个参数
事例：createElement(‘div’, {} ,‘我是内容呦’)
第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属
vue
当
中
的插槽，指的即是
slot
，是组件当
中
的一块HTML模板。该模板是否显示，以及如何显示由其父组件说了算。不过插槽显示的位置是由子组件决定 ，你将
slot
写在组件
template
的哪块，父组件传过来的模板将来就显示在哪块！
作者：张培跃
链接：https://www.jianshu.com/p/1a55faa3c3a9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
自己先想一分钟。
早先我在
Vue
.js 你不知道的一些小技巧 一文
中
简单介绍过
scope
d
Slot
s 的
使用
场景，但不是很详细。群里也有好多同学问关于
scope
d
Slot
s 如何
使用
，当然自己也有点小生疏。今天借此机会重新梳理下，以便日后学习之用。文笔有限，有不对或阐述有误的地方希望留言斧正！
谁可以看？
本文针对有下面...
