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

目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而。。。并不会正确渲染

后来,在某个写法里找到了a-table有scopedSlots这个参数,但是在template里直接赋值也不行,如下

可行方法

组件不采用template写,用render()

则变成:

render () {
  const on = {
   ...this.$listeners
  }
  const props = { ...this.$attrs, ...this.$props, ...{ dataSource: this.body, columns: this.header }}
  const table = (
   
   
  )
  return (
   
{ table }
) }, methods: () { }

重点在于scopedSlots={ this.$scopedSlots }, 这样在使用组件的外部直接写slot就可以正常渲染

调用方法


 
    // 这里是表头的渲染,下面会讲到
   
  // 这里渲染列数据
   
  

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

解决ant design vue 表格a-table二次封装,slots渲染的问题_第1张图片

this.$scopedSlots数据格式:

解决ant design vue 表格a-table二次封装,slots渲染的问题_第2张图片

在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渲染的问题_第3张图片

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

解决ant design vue 表格a-table二次封装,slots渲染的问题_第4张图片

此时我觉得,我应该把$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 (
    
   )
  })
  const table = (
   
    {slots} // 放这里
   
  )
  return (
   
{ table }
) },

大功告成!

补充知识:Ant Design of Vue中 的a-table一些使用问题

1.添加行点击及复选框



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.纵向滚动条(表格高度随屏幕高度改变而改变)

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渲染的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的