解决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位小数

this.$scopedSlots数据格式：

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

表头slot如何渲染

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

此时header格式为

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

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

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

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

此时我觉得，我应该把$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渲染的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。