当页面同时存在一个抽屉和一个表格,并且表格中存在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?
弹出抽屉时,会重新渲染自定义的列,浪费性能