vueComponent / ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

Home Page:https://antdv.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

当页面同时存在一个抽屉和一个表格,并且表格中存在customRender的单元格时,打开抽屉会自动调用customRender的函数

AnAloneJaver opened this issue · comments

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.7.3

Environment

vue2 and vue 1.7.3

Reproduction link

Steps to reproduce

<template>
  <div>
    <a-button type="primary" @click="openDrawer">
      test
    </a-button>
    <a-table :columns="columns" :data-source="data">
      <a slot="name" slot-scope="text">{{ text }}</a>
    </a-table>

    <a-drawer
        title="Basic Drawer"
        placement="right"
        :closable="false"
        :visible="drawerFlag"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-drawer>

  </div>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    customRender: function (text, record) {
      if (text) {
        console.log(123);
        return text;
      }
    },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 80,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column Long Column',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: 'Long Column',
    dataIndex: 'address',
    key: 'address 4',
    ellipsis: true,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

export default {
  data() {
    return {
      data,
      columns,
      drawerFlag:false,
    };
  },
  methods:{
    openDrawer(){
      this.drawerFlag = !this.drawerFlag
    }
  }
};
</script>

在上面代码中,点击test按钮,会从右侧弹出drawer,同时会触发console.log(123);这个只在customRender中存在的代码。

What is expected?

弹出抽屉时,不需要重新渲染自定义的列

What is actually happening?

弹出抽屉时,会重新渲染自定义的列,浪费性能