解决ant design vue 表格a-table二次封装,slots渲染的问题


Posted in Javascript onOctober 28, 2020

目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$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这个参数,但是在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就可以正常渲染

调用方法

<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>
  // 这里渲染列数据
   <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>

如下表格数据原本是数据,渲染成逢三断一,并2位小数

解决ant design vue 表格a-table二次封装,slots渲染的问题

this.$scopedSlots数据格式:

解决ant design vue 表格a-table二次封装,slots渲染的问题

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

表头slot如何渲染

还是同一个表格,要求表头有提示信息,所以我在表头也做了slots渲染了a-tooltip显示提示信息

此时header格式为

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

表头渲染设置scopedSlots里title字段,名字自定义

此时的this.$scopedSlots也有$consumption表头slot字段,但是并不能正常渲染出来

解决ant design vue 表格a-table二次封装,slots渲染的问题

但是发现this.$slots里有且只有表头的slot

解决ant design vue 表格a-table二次封装,slots渲染的问题

此时我觉得,我应该把$slots的内容渲染在a-table里,则

render () {
  const on = {
   ...this.$listeners
  }
  const props = { ...this.$attrs, ...this.$props, ...{ dataSource: this.body, columns: this.header }}
  // slots循环
  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.添加行点击及复选框

<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: [] // 选中的整行数据
    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.固定列重叠问题

官方给的建议

对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据,需要和 scroll.x 配合使用。

若列头与内容不对齐或出现列重复,请指定固定列的宽度 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设置为这些width之和,添加一个空列,让这列自适应宽度

{
 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: {
  // 监听屏幕高度改变表格高度
  screenHeight (val) {
   // 初始化表格高度
   this.scrollY = val - 386
  }

 },

mounted () {
  // 监听屏幕高度
  window.onresize = () => {
   return (() => {
    window.screenHeight = document.body.clientHeight
    this.screenHeight = window.screenHeight
   })()
  }
 },

以上这篇解决ant design vue 表格a-table二次封装,slots渲染的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 #Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 #Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 #Javascript
微信小程序picker组件两列关联使用方式
Oct 27 #Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 #Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 #Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 #Javascript
You might like
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
javascript的console.log()用法小结
2012/05/31 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
python对字典进行排序实例
2014/09/25 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
详解Python模块化编程与装饰器
2021/01/16 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
什么是Smart Navigation?
2016/07/03 面试题
房地产销售大学生自我评价分享
2013/11/11 职场文书
技术总监岗位职责
2013/12/05 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
教育科研先进个人材料
2014/01/26 职场文书
护士毕业生自荐信
2014/02/07 职场文书
政府门卫岗位职责
2014/04/29 职场文书
2014年节能工作总结
2014/12/18 职场文书
导游词格式
2015/02/13 职场文书
七一慰问简报
2015/07/20 职场文书
检讨书怎么写?
2019/06/21 职场文书
导游词之杭州西湖
2019/09/19 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书