解決ant design vue 表格a-table二次封裝,slots渲染的問題

更新時間：2020年10月28日 09:46:30 作者：Cookysurongbin

這篇文章主要介紹了解決ant design vue 表格a-table二次封裝,slots渲染的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

目的就是對a-table進行二次封裝，但是在如何顯示a-table的slot時遇到了問題，原本想法是在a-table內(nèi)把$slots都渲染，期望在使用該組件時能正確渲染，然而。。。并不會正確渲染

<template>
 <a-table
  bordered
  :scroll="{ x: scrollX, y: 600 }"
  v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}"
  :loading="loadingObj"
  v-on="listeners"
 >
  <template v-for="(val, slot) in $slots" :slot="slot">{{ this.$slots[slot] }}</template>
 </a-table>
</template>

后來，在某個寫法里找到了a-table有scopedSlots這個參數(shù)，但是在template里直接賦值也不行，如下

<a-table
  bordered
  :scroll="{ x: scrollX, y: 600 }"
  v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}"
  :loading="loadingObj"
  v-on="listeners"
  :scopedSlots="$scopedSlots"
 >

可行方法

組件不采用template寫，用render()

則變成：

render () {
  const on = {
   ...this.$listeners
  }
  const props = { ...this.$attrs, ...this.$props, ...{ dataSource: this.body, columns: this.header }}
  const table = (
   <a-table bordered props={props} scopedSlots={ this.$scopedSlots } on={on}>
   </a-table>
  )
  return (
   <div class="dc-table">
    { table }
   </div>
  )
 },
methods: () {
 
}

重點在于scopedSlots={ this.$scopedSlots }，這樣在使用組件的外部直接寫slot就可以正常渲染

調(diào)用方法

<dc-table
   ref="table"
   :columns="header"
   :dataSource="body"
   :loading="loading"
   :pagination="pagination"
   @change="handleTableChange"
   class="table-fit"
  >
 
    // 這里是表頭的渲染，下面會講到
   <template v-for="title in headerSlots" :slot="'$' + title">
    <span :key="title">
     <a-tooltip placement="right" trigger="click">
      <template slot="title">{{ getHeaderTarget(title).remark }}</template>{{ getHeaderTarget(title).title }}<a-icon type="info-circle"/>
     </a-tooltip>
    </span>
   </template>
  // 這里渲染列數(shù)據(jù)
   <template v-for="(item, index) in DECIMAL_PARAMS" :slot="item" slot-scope="text">
    <span :key="index">
     <!-- <span v-if="item === 'estimated_ROI'">
      <template v-if="text === 0">{{ text }}</template>
      <template v-else>{{ (text * 100) | NumberFixed }}%</template>
     </span> -->
     <span>{{ text | NumberFixed | NumberFormat }}</span>
    </span>
   </template>
  </dc-table>

如下表格數(shù)據(jù)原本是數(shù)據(jù)，渲染成逢三斷一，并2位小數(shù)

this.$scopedSlots數(shù)據(jù)格式：

在header中為scopedSlots: {customRender: 'consumption'} 格式

表頭slot如何渲染

還是同一個表格，要求表頭有提示信息，所以我在表頭也做了slots渲染了a-tooltip顯示提示信息

此時header格式為

[{scopedSlots: {customRender: 'consumption', title: '$consumption'} }]

表頭渲染設(shè)置scopedSlots里title字段，名字自定義

此時的this.$scopedSlots也有$consumption表頭slot字段，但是并不能正常渲染出來

但是發(fā)現(xiàn)this.$slots里有且只有表頭的slot

此時我覺得，我應(yīng)該把$slots的內(nèi)容渲染在a-table里，則

 render () {
  const on = {
   ...this.$listeners
  }
  const props = { ...this.$attrs, ...this.$props, ...{ dataSource: this.body, columns: this.header }}
  // slots循環(huán)
  const slots = Object.keys(this.$slots).map(slot => {
   return (
    <template slot={slot}>{ this.$slots[slot] }</template>
   )
  })
  const table = (
   <a-table bordered props={props} scopedSlots={ this.$scopedSlots } on={on}>
    {slots} // 放這里
   </a-table>
  )
  return (
   <div class="dc-table">
    { table }
   </div>
  )
 },

大功告成！

補充知識：Ant Design of Vue中的a-table一些使用問題

1.添加行點擊及復(fù)選框

<template>
 <div>
  <a-table
   :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
   :columns="columns"
   :dataSource="data"
   :customRow="onClickRow"
  />
 </div>
</template>
<script>
 const columns = [
  {
   title: 'Name',
   dataIndex: 'name',
  },
  {
   title: 'Age',
   dataIndex: 'age',
  },
  {
   title: 'Address',
   dataIndex: 'address',
  },
 ];

 const data = [];
 for (let i = 0; i < 46; i++) {
  data.push({
   key: i,
   name: `Edward King ${i}`,
   age: 32,
   address: `London, Park Lane no. ${i}`,
  });
 }

 export default {
  data() {
   return {
    data,
    columns,
    selectedRowKeys: [], // Check here to configure the default column
    selectedRows: [] // 選中的整行數(shù)據(jù)
    loading: false,
   };
  },
  methods: {
   onSelectChange (selectedRowKeys, selectedRows) {
    this.selectedRowKeys = selectedRowKeys;
    this.selectedRows = selectedRows
   },
   onClickRow (record) {
    return {
     on: {
      click: () => {
       const rowKeys = this.selectedRowKeys
       const rows = this.selectedRows
       if (rowKeys.length > 0 && rowKeys.includes(record.key)) {
        rowKeys.splice(rowKeys.indexOf(record.key), 1)
        rows.splice(rowKeys.indexOf(record.key), 1)
       } else {
        rowKeys.push(record.key)
        rows.push(record)
       }
       this.selectedRowKeys = rowKeys
       this.selectedRows = rows
      }
     }
    }
   }
  },
 };
</script>

2.固定列重疊問題

官方給的建議

對于列數(shù)很多的數(shù)據(jù)，可以固定前后的列，橫向滾動查看其它數(shù)據(jù)，需要和 scroll.x 配合使用。

若列頭與內(nèi)容不對齊或出現(xiàn)列重復(fù)，請指定固定列的寬度 width。

建議指定 scroll.x 為大于表格寬度的固定值或百分比。注意，且非固定列寬度之和不要超過 scroll.x。

const columns = [
  { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
  { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
  { title: 'Column 1', dataIndex: 'address', key: '1' },
  { title: 'Column 2', dataIndex: 'address', key: '2' },
  { title: 'Column 3', dataIndex: 'address', key: '3' },
  { title: 'Column 4', dataIndex: 'address', key: '4' },
  { title: 'Column 5', dataIndex: 'address', key: '5' },
  { title: 'Column 6', dataIndex: 'address', key: '6' },
  { title: 'Column 7', dataIndex: 'address', key: '7' },
  { title: 'Column 8', dataIndex: 'address', key: '8' },
  {
   title: 'Action',
   key: 'operation',
   fixed: 'right',
   width: 100,
   scopedSlots: { customRender: 'action' },
  },
 ];

我在項目中為其他列添加width，scroll x設(shè)置為這些width之和，添加一個空列，讓這列自適應(yīng)寬度

{
 title: ''
},

3.縱向滾動條（表格高度隨屏幕高度改變而改變）

<a-table
  :scroll={y: scrollY}
   :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
   :columns="columns"
   :dataSource="data"
   :customRow="onClickRow"
  />

data(){
 return {
 scrollY: document.body.clientHeight - 386, // 表格豎向滾動條,386是頁面其他元素的高度
 screenHeight: document.body.clientHeight, // 屏幕的高度
 }
} 

watch: {
  // 監(jiān)聽屏幕高度改變表格高度
  screenHeight (val) {
   // 初始化表格高度
   this.scrollY = val - 386
  }

 },

mounted () {
  // 監(jiān)聽屏幕高度
  window.onresize = () => {
   return (() => {
    window.screenHeight = document.body.clientHeight
    this.screenHeight = window.screenHeight
   })()
  }
 },

以上這篇解決ant design vue 表格a-table二次封裝,slots渲染的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: