elementUI el-table组件,数据筛选,数据回显,单选,多选
在Element UI的el-table
组件中,可以使用el-table-column
的filters
属性来实现数据筛选功能,使用v-model
来实现数据回显,并且可以通过设置el-table-column
的type
属性为'selection'
来实现单选和多选功能。
以下是一个简单的例子:
<template>
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
@filter-change="handleFilterChange"
>
<!-- 多选 -->
<el-table-column
type="selection"
width="55">
</el-table-column>
<!-- 单选 -->
<el-table-column
type="radio"
width="55">
</el-table-column>
<!-- 筛选 -->
<el-table-column
prop="date"
label="日期"
sortable
: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' }]"
:filter-method="filterHandler"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
sortable
:filters="[{ text: '张三', value: '张三' }, { text: '李四', value: '李四' }]"
:filter-method="filterName"
filter-placement="bottom-end">
</el-table-column>
<el-table-column
prop="address"
label="地址"
sortable
>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '张三',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '李四',
address: '上海市普陀区金沙江路 1517 弄'
}],
multipleSelection: []
}
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleFilterChange(filters) {
// 处理筛选结果
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
},
filterName(value, row, column) {
const property = column['property'];
return row[property] === value;
}
}
}
</script>
在这个例子中,我们定义了一个表格,其中包含了多选和单选列,还有一个日期列和姓名列,这些列都支持筛选功能。筛选条件是预设的,但实际应用中,筛选条件可以动态生成或由用户自定义。在el-table
上监听selection-change
事件来得到多选的结果,监听filter-change
事件来得到筛选条件的变化。通过filter-method
定义筛选函数,可以自定义筛选逻辑。
评论已关闭