前言

起因：

在使用 element-ui table組件時(shí)，由于表列比較多一個(gè)個(gè)寫特別麻煩，所以想通過(guò)將所有表頭定義成一個(gè)數(shù)組，通過(guò)遍歷多方式去實(shí)現(xiàn)。這樣解決了手寫很多 el-table-column 的情況。

障礙：

類似于下面自定義表列的樣式，它是通過(guò) slot-scope 去覆蓋 el-table-column 內(nèi)部slot的樣式實(shí)現(xiàn)的。那我們?cè)诒闅v表頭數(shù)組的時(shí)候如何實(shí)現(xiàn)呢？

參考：

用過(guò) react 開發(fā)會(huì)經(jīng)常用到 ant design ，其中它的 table 組件是可以接受 render屬性的，下面使用table組件時(shí)，只需要定義好，columns(表頭列) data(表的具體數(shù)據(jù))即可。整體看起來(lái)很簡(jiǎn)潔 去渲染自定義的組件的。 點(diǎn)擊查看 antdesign

demo：

codepen demo地址

const columns = [
 {
 title: 'Name',
 dataIndex: 'name',
 render: (text, row, index) => {
  if (index < 4) {
  return <a>{text}</a>;
  }
  return {
  children: <a>{text}</a>,
  props: {
   colSpan: 5,
  },
  };
 },
 }]
 const const data = [
 {
 key: '1',
 name: 'John Brown',
 age: 32,
 tel: '0571-22098909',
 phone: 18889898989,
 address: 'New York No. 1 Lake Park',
 }]
ReactDOM.render(<Table columns={columns} dataSource={data} bordered />, mountNode);

在 Vue 中實(shí)現(xiàn) render 屬性

接下來(lái)我們要實(shí)現(xiàn)下圖的table的樣式，但是這一次我們采用 render 傳參數(shù)的方式

思路

1. 父組件將需要渲染的列表通過(guò) props 傳遞給子組件
2. 子組件使用 slot 并填充默認(rèn)渲染的 el-table-column 方式為 prop 渲染 data 中傳遞的值
3. 子組件通過(guò) slot 將值傳回給父組件，父組件通過(guò) slot-scope 接受到子組件的值，判斷該項(xiàng)是否有 render 屬性，有的話在組件標(biāo)簽添加 render 屬性返回的 html 去覆蓋 slot 中默認(rèn)的值。

子組件定義默認(rèn)值

有了上面的思路，去實(shí)現(xiàn)子組件。我們需要知道一點(diǎn)，每個(gè) el-table-column 只是定義了一列的表頭和數(shù)據(jù)，而 :data="tableList" 中的每項(xiàng)值是定義了一行的數(shù)據(jù)。所以 el-table-column 是按列來(lái)分，data 是按行來(lái)分

• 通過(guò)props 去接受表頭列表，數(shù)據(jù)列表
• 遍歷表頭數(shù)據(jù)，并且將 el-table-column 作為默認(rèn)數(shù)據(jù)，使用 slot 包裹起來(lái)
• 通過(guò) slot 想父組件傳遞當(dāng)前項(xiàng)的數(shù)據(jù)

<template>
 <el-table :data="tableList" style="width:500px">
  <template v-for="item in propList">
  <slot :content="item">
   <el-table-column :key="item.id" :prop="item.prop" :label="item.label"></el-table-column>
  </slot>
  </template>
 </el-table>
</template>
<script>
 export default {
  props:{
   propList:{
   type:Array,
   default:()=>[]
   },
   tableList:{
   type:Array,
   default:()=>[]
   },
  }
 }
</script>

父組件定義

父組件通過(guò) slot-scope 來(lái)接受到子組件傳遞過(guò)來(lái)的數(shù)據(jù)，然后判斷是否有 render 屬性來(lái)確定是否用要去自定義樣式覆蓋默認(rèn)的 slot

• 首先看傳遞給子組件的表頭數(shù)據(jù)，可以看到，第二，三行列表中有一個(gè)render屬性，它是一個(gè)函數(shù)并返回一個(gè) html 的字符串。
• tableList就是普通的數(shù)據(jù)，也就是數(shù)據(jù)的 key 值去渲染對(duì)應(yīng)的數(shù)據(jù)
• 圖片這列舉例子，當(dāng)父組件通過(guò) props 將 {label,prop,id,render} 傳遞給子組件后，子組件有通過(guò) slot 將值傳遞回父組件。
  • 到這里有些人會(huì)有疑問(wèn)，為什么要將數(shù)據(jù)這樣傳來(lái)傳去，因?yàn)槲覀冊(cè)谧咏M件中定義好了默認(rèn)樣式，而父組件中需要判斷該值是否需要自定義樣式，去覆蓋子組件中的樣式。
  • 這些自定義樣式就是一開始，在render函數(shù)中返回的 html 字符串
  • 為啥 React 直接返回 jsx ，而Vue需要返回 html 字符串，因?yàn)閞eact本身就是使用 JSX 來(lái)渲染模版的，最終都會(huì)通過(guò) babel 編譯成 React.createElement ,而Vue是通過(guò) template 來(lái)渲染模版的，這里通過(guò)定義 template 模版字符串，最終通過(guò) v-html 來(lái)解析
• 為什么這里有兩個(gè) slot-scope ，第一個(gè)是 slot-item 的，組件內(nèi)部通過(guò) slot-scope 將值傳遞出來(lái)。而第二個(gè)是 el-table-item 的，ui組件內(nèi)部同樣將數(shù)據(jù)通過(guò) slot-scope 傳遞傳來(lái)。
• 通過(guò)第一個(gè) slot-scope 拿到 propList 中的定義的 render 函數(shù)，通過(guò)第二個(gè) slot-scope 拿到 table 組件內(nèi)部傳遞出來(lái)的數(shù)據(jù)，將數(shù)據(jù)傳遞給 render 函數(shù)去生成自定義模版

最終通過(guò) v-html 去解析生成的字符串模版

<slot-item :propList="propList" :tableList="tableList">
 <template slot-scope="{content}" v-if="content.render">
  <el-table-column :label="content.label">
   <template slot-scope="{$index,row}">
    <div v-html="content.render(row)"></div>
   </template>
  </el-table-column>
 </template>
</slot-item>
 export default {
  components:{
   SlotItem
  },
  data () {
   return { 
    propList:[
     {label:'姓名',prop:'name',id:1},
     {label:'圖片',prop:'pic',id:2,render:({pic})=>{
      return `<img style="width:30px;height:30px" src='${pic}' />`
     }},
     {label:'操作',prop:'operate',id:3,render:({text})=>{
      return `<div style="color:#999">${text}</div>`
     }},
    ],
    tableList:[
     {name:'章三',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c192f6.png',text:'新增'},
     {name:'里斯',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c2797e.png',text:'刪除'},
     {name:'網(wǎng)舞',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c33144.png',text:'跳轉(zhuǎn)'},
    ]
   }
  }
 }
</script>

結(jié)尾

有了render屬性，可以想 ant-design 那樣簡(jiǎn)潔的屬性 ui組件模版了！

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

最新評(píng)論