最近使用element 表格插件做功能，本来想做一个很简单点击列进行编辑的功能，发现直接在el-table-column使用v-show/v-if切换性能损耗太大。
具体原因应该是element为了实现固定列功能时，同样的表格会渲染3个，再加上每行数据在数组中，导致每次任意行变动时，都会触发n多次的判断，性能损耗太大，大家有没有什么好的实现方式，即使现在我改成点击列仅操作当前列dom控制编辑元素了，但是功能复杂了很多。
<template>
<el-button @click="resetDateFilter">清除日期过滤器</el-button>
<el-button @click="clearFilter">清除所有过滤器</el-button>
<el-table ref="filterTable" :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" sortable width="180" column-key="date" :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]" :filter-method="filterHandler" > </el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<span v-show="!isLabelOption(scope.row)">
{{getRowValue(scope.row)}}
</span>
<span v-show="isLabelOption(scope.row)">
{{getLabel(scope.row)}}
</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址" :formatter="formatter"> </el-table-column>
<el-table-column prop="tag" label="标签" width="100" :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" :filter-method="filterTag" filter-placement="bottom-end">
<template slot-scope="scope"> <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag> </template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', tag: '家' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', tag: '公司' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', tag: '家' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', tag: '公司' }] } },
methods: {
resetDateFilter() { this.$refs.filterTable.clearFilter('date'); },
clearFilter() { this.$refs.filterTable.clearFilter(); },
isLabelOption(row){
console.log("判断是否为labelOption类型元素", row,row);
return row.type==="label"
},//伪类
getRowValue(row){},//伪类
getLabel(row){},//伪类
formatter(row, column) { return row.address; },
filterTag(value, row) { return row.tag === value; },
filterHandler(value, row, column) { const property = column['property']; return row[property] === value; } } }
</script>
可以看到我将数据改成20条时，随便点击看到函数执行判断等太频繁，怎么让他每次操作vue只监听当前列
