ad717ce269
Former-commit-id: 5e31719473b165e4f4f9775caeb75443c824629c [formerly 5e31719473b165e4f4f9775caeb75443c824629c [formerly 5e31719473b165e4f4f9775caeb75443c824629c [formerly 5e31719473b165e4f4f9775caeb75443c824629c [formerly 1d07766fa79982363c9bd79d5fe0b4031ed3b8a4 [formerly 8b21a4544fffa595a1fcf30d5ccfd49f019e63fe]]]]] Former-commit-id: d320f28bc04991cf266dd2d6099a8bc74f8d973f Former-commit-id: b1b333020d86cab873b1d4bc87da08fdb662a414 Former-commit-id: 8f07a5e3d37e39fbb53db3b345eb141632d2621d [formerly 8262123bccb3e834e4397302796d78cd50128836] Former-commit-id: 8aa0f5b635b997c8b1d25dfa06ef4951b2f9e116 Former-commit-id: 30a553d7dd9eb96312a97c6783a9f302bf00ac82 Former-commit-id: 90144d1fdb9b97b308bb4958cefa2ff7aee13563 Former-commit-id: 30e7030b18ba0311b3ec6363596ccde7b4a77243 Former-commit-id: 89f15d9036a8e782bab91a7857ad2463f3df8d15
84 lines
2.1 KiB
Vue
84 lines
2.1 KiB
Vue
<template>
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="date"
|
|
label="日期"
|
|
sortable
|
|
width="180"
|
|
: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">
|
|
</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>
|
|
|
|
|
|
export default {
|
|
title: '筛选',
|
|
index: 13,
|
|
data () {
|
|
return {
|
|
filename: __filename,
|
|
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: {
|
|
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>
|