博客

今天第一次将ant vue2的table组件中expandedRowRender与scroll一起用，结果控制端报错：

Warning: [antdv: `expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.]

意思是初始化时`expandedRowRender`和`scroll`不兼容。

解决方案：将`expandedRowRender`用变量表示，初始值为空，在dom渲染完成之后（mounted）赋值，这样无论是初次加载页面还是操作展开折叠table都不会报错了。主要代码如下：

<a-table
  :columns="columns"
  :data-source="tableData"
  :scroll="{ x: 1500, y:600}"
  :rowKey="(record) => record.id"
  @expand="expandData"
  :expandedRowKeys="expandedRowKeys"
>
  <template :slot="expandedRowRender" slot-scope="record">
    <-- 展开的table -->
  </template>
</a-table>

<script>
 data() {
   return {
     columns: [],
     tableData: [],
     expandedRowKeys: [],
     expandedRowRender: undefined,
   }
 },
 mounted() {
   this.expandedRowRender = "expandedRowRender";
 },
</script>