需求:
1.选中列表数据实现单选效果;
2.支持单列模糊搜索(官网例子)这个搜索是前端进行处理的没有调用后台接口去处理,可根据自己的需求去改进;
3.业务场景:切换页码时;数据搜索过滤时;页面单选效果也不会丢失;
之前自己实现了一个但是还差个搜索功能,而且之前的列表是滚动的,所以还是想说用现成的组件进行改造更加快捷而且也满足需求,能不造轮子就不自己造
效果如下:
代码如下:
<template>
<a-table
:data-source="data"
:columns="columns"
:pagination="{ defaultPageSize: 2 }"
:customRow="rowClick"
>
<template slot="radioCheck" slot-scope="text">
<a-radio-group v-model="formData.flavor">
<a-radio :value="text"></a-radio>
</a-radio-group>
</template>
<div
slot="filterDropdown"
slot-scope="{
setSelectedKeys,
selectedKeys,
confirm,
clearFilters,
column
}"
style="padding: 8px"
>
<a-input
v-ant-ref="c => (searchInput = c)"
:placeholder="`Search ${column.dataIndex}`"
:value="selectedKeys[0]"
style="width: 188px; margin-bottom: 8px; display: block"
@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
@pressEnter="
() => handleSearch(selectedKeys, confirm, column.dataIndex)
"
/>
<a-button
type="primary"
icon="search"
size="small"
style="width: 90px; margin-right: 8px"
@click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
>
Search
</a-button>
<a-button
size="small"
style="width: 90px"
@click="() => handleReset(clearFilters)"
>
Reset
</a-button>
</div>
<a-icon
slot="filterIcon"
slot-scope="filtered"
type="search"
:style="{ color: filtered ? '#108ee9' : undefined }"
/>
<template slot="customRender" slot-scope="text, record, index, column">
<span v-if="searchText && searchedColumn === column.dataIndex">
<template
v-for="(fragment, i) in text
.toString()
.split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
>
<mark
v-if="fragment.toLowerCase() === searchText.toLowerCase()"
:key="i"
class="highlight"
>{{ fragment }}</mark
>
<template v-else>{{ fragment }}</template>
</template>
</span>
<template v-else>
{{ text }}
</template>
</template>
</a-table>
</div>
</template>
<script>
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park'
},
{
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park'
},
{
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park'
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park'
}
]
export default {
name: 'test',
data() {
return {
formData: { flavor: 1 }, //单选绑定数据
data,
searchText: '',
searchInput: null,
searchedColumn: '',
columns: [
{
title: ' ',
dataIndex: 'key',
scopedSlots: { customRender: 'radioCheck' }
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
scopedSlots: {
filterDropdown: 'filterDropdown',
filterIcon: 'filterIcon',
customRender: 'customRender'
},
onFilter: (value, record) =>
record.name.toString().toLowerCase().includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => {
this.searchInput.focus()
}, 0)
}
}
},
{
title: 'Age',
dataIndex: 'age',
key: 'age'
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
ellipsis: true
}
],
//点击行
rowClick: record => ({
on: {
click: () => {
// console.log(record);
this.clickRow(record) //触发methods中的方法
}
}
})
}
},
methods: {
handleSearch(selectedKeys, confirm, dataIndex) {
confirm()
this.searchText = selectedKeys[0]
this.searchedColumn = dataIndex
console.log('searchText', this.searchText)
console.log('searchedColumn', this.searchedColumn)
},
handleReset(clearFilters) {
clearFilters()
this.searchText = ''
},
clickRow(value) {
this.formData.flavor = value.key
}
}
}
</script>
<style scoped>
.highlight {
background-color: rgb(255, 192, 105);
padding: 0px;
}
</style>