「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」。
方式一、使用 element-ui 的 Table 组件自带的筛选功能来实现
只需要在列中设置 filters 和 filter-method 属性即可开启该列的筛选。filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。
实现方式如下：
<template>
<div class="app-container">
<el-table
:data="tableData"
style="width: 100%;"
border
height="300"
>
<el-table-column
prop="date"
label="日期"
align="center"
:filters="headerSelect"
:filter-method="filterHandler"
:filter-multiple="false"
/>
<el-table-column
prop="name"
label="姓名"
align="center"
/>
<el-table-column
prop="address"
label="地址"
align="center"
/>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
headerSelect: [{
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'
}]
}
},
methods: {
filterHandler(value, row, column) {
const property = column['property']
return row[property] === value
}
}
}
</script>
效果如下：
方式二、使用 element-ui 的 Dropdown 下拉菜单组件来实现
通过组件 slot 来设置下拉触发的元素以及需要通过具名 slot 为 dropdown 来设置下拉菜单。默认情况下，下拉按钮只要 hover 即可，无需点击也会显示下拉菜单，这里我们设置成点击触发（trigger="click"）。
实现方式如下：
<template>
<div class="app-container">
<el-table
:data="tableData2"
style="width: 100%;"
border
height="300"
>
<el-table-column align="center">
<template slot="header" slot-scope="scope">
<el-dropdown trigger="click" @command="handleCommand">
<span>日期（{{ command }}）<i class="el-icon-arrow-down el-icon--right" /></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="item in headerSelect"
:key="item.value"
:command="item.text"
>
{{ item.text }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<template slot-scope="scope">
<span>{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
align="center"
/>
<el-table-column
prop="address"
label="地址"
align="center"
/>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
headerSelect: [{
text: '全部',
value: 'all'
}, {
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'
}],
tableData2: [],
command: '全部'
}
},
created() {
this.tableData2 = this.tableData
},
methods: {
handleCommand(command) {
this.command = command
if (command === '全部') {
this.tableData2 = this.tableData
} else {
this.tableData2 = this.tableData.filter(item => {
return item.date.indexOf(command) > -1
})
}
}
}
}
</script>
效果如下：
方式三、通过自定义 Table 组件的表头来实现
在某一列的表头中嵌套一个下拉框即可，注意这里的【slot-scope="scope"】必须写，否则不生效。
实现方式如下：
<template>
<div class="app-container">
<el-table
:data="tableData2"
style="width: 100%;"
border
height="300"
>
<el-table-column align="center">
<template slot="header" slot-scope="scope">
<span> 日期 </span>
<el-select
v-model="headerSelected"
@change="headerChanged"
>
<el-option
v-for="item in headerSelect"
:key="item.value"
:label="item.text"
:value="item.value"
/>
</el-select>
</template>
<template slot-scope="scope">
<span>{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
align="center"
/>
<el-table-column
prop="address"
label="地址"
align="center"
/>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
headerSelect: [{
text: '全部',
value: 'all'
}, {
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'
}],
tableData2: [],
headerSelected: 'all'
}
},
created() {
this.tableData2 = this.tableData
},
methods: {
headerChanged(val) {
if (val === 'all') {
this.tableData2 = this.tableData
} else {
this.tableData2 = this.tableData.filter(item => {
return item.date.indexOf(val) > -1
})
}
}
}
}
</script>
效果如下：
