华山资源网

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
网络编程 2024/11/15 佚名
3 1

render-header

render-header在官方文档中的介绍是这样的：

参数 说明 类型 可选值 默认值 render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) — —

修改列标题样式

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

以element-ui官方文档一个table表格为例，我们在地址的后面加一个定位标志的图标，代码如下：

<template>
 <el-table
 :data="tableData2"
 style="width: 100%"
 :row-class-name="tableRowClassName">
 <el-table-column
  prop="date"
  label="日期"
  width="180">
 </el-table-column>
 <el-table-column
  prop="name"
  label="姓名"
  width="180">
 </el-table-column>
 <el-table-column
  prop="address"
  label="地址" :render-header="renderHeader"> // 加入render事件
 </el-table-column>
 </el-table>
</template>

<style>
 .el-table .warning-row {
 background: oldlace;
 }

 .el-table .success-row {
 background: #f0f9eb;
 }
</style>

<script>
 export default {
 methods: {
  tableRowClassName({row, rowIndex}) {
  if (rowIndex === 1) {
   return 'warning-row';
  } else if (rowIndex === 3) {
   return 'success-row';
  }
  return '';
  },
  // render 事件
  renderHeader (h,{column}) { // h即为cerateElement的简写，具体可看vue官方文档
  return h(
   'div',
   [ 
   h('span', column.label),
   h('i', {
    class:'el-icon-location',
    style:'color:#409eff;margin-left:5px;'
   })
   ],
  );
  }
 },
 data() {
  return {
  tableData2: [{
   date: '2016-05-02',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1518 弄',
  }, {
   date: '2016-05-04',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1518 弄'
  }, {
   date: '2016-05-01',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1518 弄',
  }, {
   date: '2016-05-03',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1518 弄'
  }]
  }
 }
 }
</script>

效果如下：

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

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

还是以上面的代码为例，只写关键代码：

...
// render 事件
renderHeader (h,{column}) { // h即为cerateElement的简写，具体可看vue官方文档
 return h(
 'div',
 [ 
  h('span', column.label),
  h('el-checkbox',{
  style:'margin-left:5px',
  on:{
   change:this.select // 选中事件 
  }
  })
 ],
 );
},
// 添加选中事件
select (data) {
 console.log(data);
}
...

效果如下：

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

3.在表头添加一个Tooltip

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

还是以上面的代码为例，刚开始我想直接用‘el-tooltip'，应该不是很难，然后就是这样：

...
renderHeader (h,{column}) {
 return h(
 'div',
 [ 
  h('span', column.label),
  h('el-tooltip',[
  h('i', {
   class:'el-icon-question',
   style:'color:#409eff;margin-left:5px;'
  })
  ],{
  content: '这是一个提示'
  })
 ]
 );
}
...

运行后发现，基本样式出来了，但是提示没有

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

根据element-ui 关于tooltip的文档，我发现不管是effect, content还是placement对tooltip都不管用，既然硬上不管用，就曲线救国，通过组件的方法，先造个轮子再走路

// 写一个PromptMessage的组件，并全局注册
<template>
 <div class="tooltip">
 <el-tooltip effect="dark" placement="right">
  <div slot="content"> // 插槽，可提供多行的提示信息
  <p v-for="item in messages" :key="item">
   {{item}}
  </p>
  </div>
  <i class="el-icon-question" style="color:#409eff;margin-left:5px;font-size:15px;"></i>
 </el-tooltip>
 </div>
</template>

<script>
 export default {
 props:['messages']
 };
</script>

然后在render-header事件中使用组件

...
renderTip (h,{column}) {
 return h(
 'div',{
  style:'display:flex;margin:auto;'
 },
 [
  h('span', column.label),
  h('prompt-message', {
  props: {messages: ["这是住址信息"]}
  })
 ]
 );
}
...

这次我们发现，果然造的轮子还是挺不错的

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

JSX语法

或许你会发现，这个原生的createElement 写起来并不简单，而且很费事，我们也可以采用JSX的方式，这个在Vue官方文档中有提到

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

查看文档，可以找到安装使用的方法

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

安装完成后想要再实现tooltip就简单了

...
renderTip (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-tooltip>
 );
}
...

这样看着很好理解，写起来也很方便

补充：

最近有个需求，需要在每次对el-table的单项进行勾选时，使用@select-change去调取后台接口，更改表格数据。

然而，el-table的selection列有个大bug。

首先，获取后的数据对于el-table的selection列来说，没有字段props可以去接收，这就导致没有数据是选中的，会直接触发@select-change方法，回调参数val为[]。

其次，selection需要使用toggleSelection方法去更改，当更改时，又一次触发@select-change方法，这显然不符合需求。

因此，需要自定义table的表头信息，设置为el-checkbox。

代码如下

// 自定义表头select
 renderHeader(h, {column, $index}) {
  return h("span", {}, [
  h('el-checkbox',{
   props: {
   checked: this.allchecked 
   },
   on:{
   change: this.updateAllSelected // 选中事件 
   }
  })]);
 },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com