解决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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
使用node.js搭建服务器
May 20 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
vue 使用原生组件上传图片的实例
Sep 08 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
深入分析php之面向对象
2013/05/15 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
axios学习教程全攻略
2017/03/26 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
使用yeoman构建angular应用的方法
2017/08/14 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
详解Python中的array数组模块相关使用
2016/07/05 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
致垒球运动员加油稿
2014/02/16 职场文书
建筑工地质量标语
2014/06/12 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
新教师个人总结
2015/02/06 职场文书
2015年推普周活动总结
2015/03/27 职场文书
房屋质量投诉书
2015/07/02 职场文书
初中语文教学研修日志
2015/11/13 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书