Element-ui自定義table表頭、修改列標(biāo)題樣式、添加tooltip、:render-header使用

更新時(shí)間：2019年04月11日 15:11:11 作者：pinbolei

這篇文章主要介紹了Element-ui自定義table表頭、修改列標(biāo)題樣式、添加tooltip、:render-header使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

render-header

render-header在官方文檔中的介紹是這樣的：

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
render-header	列標(biāo)題 Label 區(qū)域渲染使用的 Function	Function(h, { column, $index })	—	—

修改列標(biāo)題樣式

1.在列標(biāo)題后面加一個(gè)圖標(biāo)。

以element-ui官方文檔一個(gè)table表格為例，我們?cè)诘刂返暮竺婕右粋€(gè)定位標(biāo)志的圖標(biāo)，代碼如下：

<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的簡(jiǎn)寫，具體可看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: '上海市普陀區(qū)金沙江路 1518 弄',
  }, {
   date: '2016-05-04',
   name: '王小虎',
   address: '上海市普陀區(qū)金沙江路 1518 弄'
  }, {
   date: '2016-05-01',
   name: '王小虎',
   address: '上海市普陀區(qū)金沙江路 1518 弄',
  }, {
   date: '2016-05-03',
   name: '王小虎',
   address: '上海市普陀區(qū)金沙江路 1518 弄'
  }]
  }
 }
 }
</script>

效果如下：

2.在列標(biāo)題后面添加一個(gè)單選框

還是以上面的代碼為例，只寫關(guān)鍵代碼：

...
// render 事件
renderHeader (h,{column}) { // h即為cerateElement的簡(jiǎn)寫，具體可看vue官方文檔
 return h(
 'div',
 [ 
  h('span', column.label),
  h('el-checkbox',{
  style:'margin-left:5px',
  on:{
   change:this.select // 選中事件 
  }
  })
 ],
 );
},
// 添加選中事件
select (data) {
 console.log(data);
}
...

效果如下：

3.在表頭添加一個(gè)Tooltip

我們經(jīng)常會(huì)遇到一些奇怪的需求，但是即使再奇怪我們也不能認(rèn)輸，現(xiàn)在有一個(gè)需求，要在列表表題后面添加一個(gè)提示，我們開(kāi)始嘗試著做：

還是以上面的代碼為例，剛開(kāi)始我想直接用‘el-tooltip'，應(yīng)該不是很難，然后就是這樣：

...
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: '這是一個(gè)提示'
  })
 ]
 );
}
...

運(yùn)行后發(fā)現(xiàn)，基本樣式出來(lái)了，但是提示沒(méi)有

根據(jù)element-ui 關(guān)于tooltip的文檔，我發(fā)現(xiàn)不管是effect, content還是placement對(duì)tooltip都不管用，既然硬上不管用，就曲線救國(guó)，通過(guò)組件的方法，先造個(gè)輪子再走路

// 寫一個(gè)PromptMessage的組件，并全局注冊(cè)
<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: ["這是住址信息"]}
  })
 ]
 );
}
...

這次我們發(fā)現(xiàn)，果然造的輪子還是挺不錯(cuò)的

JSX語(yǔ)法

或許你會(huì)發(fā)現(xiàn)，這個(gè)原生的createElement 寫起來(lái)并不簡(jiǎn)單，而且很費(fèi)事，我們也可以采用JSX的方式，這個(gè)在Vue官方文檔中有提到

查看文檔，可以找到安裝使用的方法

安裝完成后想要再實(shí)現(xiàn)tooltip就簡(jiǎn)單了

...
renderTip (h,{column}) {
 return (
 <el-tooltip class="tooltip" effect="dark" placement="right">
  <ul slot="content">
  <li>這是第一個(gè)提示</li>
  <li>這是第二個(gè)提示<li>
  </ul>
  <i class="el-icon-question"></i>
 </el-tooltip>
 );
}
...

這樣看著很好理解，寫起來(lái)也很方便

補(bǔ)充：

最近有個(gè)需求，需要在每次對(duì)el-table的單項(xiàng)進(jìn)行勾選時(shí)，使用@select-change去調(diào)取后臺(tái)接口，更改表格數(shù)據(jù)。

然而，el-table的selection列有個(gè)大bug。

首先，獲取后的數(shù)據(jù)對(duì)于el-table的selection列來(lái)說(shuō)，沒(méi)有字段props可以去接收，這就導(dǎo)致沒(méi)有數(shù)據(jù)是選中的，會(huì)直接觸發(fā)@select-change方法，回調(diào)參數(shù)val為[]。

其次，selection需要使用toggleSelection方法去更改，當(dāng)更改時(shí)，又一次觸發(fā)@select-change方法，這顯然不符合需求。

因此，需要自定義table的表頭信息，設(shè)置為el-checkbox。

代碼如下

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: