渲染头

官方文件中render-header的介绍如下：

参数描述类型可选值默认值渲染-标题列标题标签函数(h，{column，$ index})用于区域渲染-修改列标题样式

1.在列标题后添加一个图标。

以element-ui官方文档中的一个表格为例。我们在地址后添加一个定位标记图标。代码如下：

模板El-table : data=' table data 2 ' style=' width : 100% ' : row-class-name=' tablerow class name ' El-table-column prop=' date ' label=' date ' width=' 180 '/El-table-column-table-column prop=' address ' label=' address ' : render-header} .埃尔表。success-row { background : # f0f 9eb；}/stylescript导出默认值{ methods : { TableRowClassName({ row，RowIndex }){ if(RowIndex===1){ return ' warning-row '；} else if(RowIndex===3){ return ' success-row '；}返回“”；}，//render header render event(h，{column}) {//h是cerateElement的缩写。详情请参考vue官方文件Return h ('div '，[h ('span ')，一栏。标签)，h ('I '，{class:' el-icon-location '，边距-left :5 px；' }) ], );}}，data(){ return { tabledata 2:[{ date : ' 2016-05-02 '，名称： '王小虎'，地址： '上海市普陀区金沙江路1518弄'，}，{date:' 2016-05-06。姓名： '王小虎'，地址： '上海市普陀区金沙江路1518弄' }，{日期：' 2016年5月1日'，姓名3360 '王小虎'，地址： '上海市普陀区金沙江路1518弄' }，{日期：' 2016-05-03 '，姓名： '王小虎'，地址： ' 1518弄'

2.在列标题后添加一个单选框

或者以上面的代码为例，只写关键代码：

.renderHeader事件renderHeader (h，{column}) {//h是cerateElement的缩写，可以在官方文档return h ('div '，[h ('span '，column)中找到.标签)，h ('El-checkbox '，{ style : ' margin-left :5 px '， {change:this。select//select events}})]，)；}，//添加所选事件select(data){ console . log(data)；} .效果如下：

3.在标题中添加工具提示

我们经常会遇到一些奇怪的要求，但即使奇怪也不能认输。现在有需求了。为了在列表问题后添加提示，我们开始尝试做：

以上面的代码为例。起初，我想直接使用“el-tooltip”。应该不会很难，然后就是这个：

.renderHeader (h，{column}) { return h('div '，[ h('span '，column.label)，h('el-tooltip '，[ h('i '，{ class:'el-icon-question '，style: ' color: # 409eff边距-left :5 px；'}) ]，{ content: '这是提示' })]；} .跑完之后发现基本风格出来了，但是提示没有

根据element-ui关于工具提示的文档，我发现无论是效果、内容还是放置，对工具提示都不起作用。既然不努力，那就曲线救国。通过组件的方法，在行走之前构建一个轮子

//写一个PromptMessage的组件，全局注册模板div class=' tooltip ' El-tooltip effect=' dark ' placement=' right ' div slot=' content '/slot。它可以提供多行提示信息p v-for=' messages中的项目' : key=' item ' { item } }/p/div I class=' El-icon-question ' style=' color 3360 # 409 eff；边距-left :5 px；' font-size :15 px；'/I/El-tooltip/div/template script导出默认值{ prop s 3360[' messages ']}；/script然后在render-header事件中使用该组件

.renderTip (h，{column}) { return h('div '，{ style: ' display:flex' margin:auto'}，[h ('span '，列。label)，h ('prompt-message '，{ prop s : { messages 3360['这是地址信息']} })]；} .这一次，我们发现果然做出来的轮子还是挺不错的。

JSX语法

也许你会发现这个原生的createElement并不容易写，而且要花很多时间。我们也可以使用JSX，这在Vue的官方文件中有提及

查看文档以了解如何安装它

安装完成后很容易实现工具提示

.渲染提示(h，{ column }){ return(El-tooltip class=' tooltip ' effect=' dark ' placement=' right ' ul slot=' content ' Li这是第一个提示/li li这是第二个提示Li/ul I class=' El-icon-question '/I }.很容易理解，也很容易写。

补充：

最近有一个需求，就是每次检查el-table的一个单独项目时，都应该使用@select-change来调用后台接口并更改表数据。

然而，el-table的选择列有一个很大的错误。

首先，el-table的选择列没有字段道具接收得到的数据，导致没有数据被选中，会直接触发@select-change方法，回调参数val为[]。

其次，选择需要通过toggleSelection进行更改。更改时再次触发@select-change方法，显然不符合要求。

因此，您需要自定义表格的标题信息，并将其设置为el-checkbox。

代码如下

//自定义标题选择呈现标题(h，{column，$ index }){返回h ('span '，{}，[h ('el-checkbox '，{props: {checked: this。allchecked}， {change3360 this。updateallselected。}，以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。