console
var Main = {
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: '公司'
}],
currentPage: 1,
total:100,
pageSize:1
}
},
methods: {
tablePagination(data=[]){
let array = [], startNum=0, endNum = 0;
this.total = data.length;
startNum = (this.currentPage-1)*this.pageSize;
if(this.currentPage*this.pageSize<this.total){
endNum = this.currentPage*this.pageSize;
} else {
endNum = this.total;
}
array = data.slice(startNum, endNum);
return array;
},
formatter(row, column) {
return row.address;
},
filterTag(value, row) {
return row.tag === value;
},
filterChange(filters){
console.log(filters)
},
handleCurrentChange(val){
return this.currentPage=val;
}
},
computed:{
showTable(){
return this.tablePagination(this.tableData);
}
},
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.5/lib/index.js"></script>
<div id="app">
<template>
<el-table :data="showTable" border style="width: 100%" @filter-change="filterChange">
<el-table-column prop="date" label="日期" sortable width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</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" column-key = "aaa">
<template scope="scope">
<el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" close-transition>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
</el-table>
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
:total="1000">
</el-pagination>
</template>
</div>
@import url("//unpkg.com/element-ui@1.4.5/lib/theme-default/index.css");