如下代码,formatter方法执行了两次。。
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<link crossorigin="anonymous" integrity="sha384-lORadheqlc4cbo9L5It1a5q/AS57s9lXvER3RpFU97WXyO3bZL+siYtgOjLigS3D"
href="https://lib.baomitu.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app">
<template>
<el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
<el-table-column prop="date" label="日期" sortable width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" sortable width="180">
</el-table-column>
<el-table-column prop="address" label="地址" :formatter="formatter">
</el-table-column>
</el-table>
</template>
</div>
</body>
<script type="text/javascript">
var Main = {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
},
methods: {
formatter(row, column) {
console.log('打印了两次,bug?')
return row.address;
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</html>
本身是只跑一次,但排序后还会在跑一次
你这里的两次是:默认的一次,你设置了默认排序后,在排序后又执行了一次