vxe-table 实现复杂的表格功能。
<template>
<div>
<div class="box">
<!-- 添加行数据按钮 -->
<div @click="add" class="addBtn">
<a-icon type="plus" />添加
</div>
<!-- 表格 -->
<vxe-table
ref="xTable"
auto-resize
show-overflow
header-align="center"
row-id="id"
:data="tableData"
:row-config="{isHover:true}"
:edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
@cell-click="cellClick"
>
<vxe-column field="id" title="工号" width="100" align="center"></vxe-column>
<vxe-column
field="name"
title="姓名"
width="100"
align="center"
:edit-render="{ name: 'input' }"
:filters="[]"
:filter-method="filterName"
></vxe-column>
<vxe-column
field="age"
title="年龄"
width="100"
align="center"
sortable
:edit-render="{ name: 'input' }"
></vxe-column>
<vxe-column
field="sex"
title="性别"
width="100"
align="center"
:edit-render="{}"
:filters="[{label: '男', value: 1}, {label: '女', value: 0}]"
:filter-multiple="false"
>
<template #default="{ row }">
<span>{{ formatSex(row.sex) }}</span>
</template>
<template #edit="{ row }">
<vxe-select v-model="" transfer>
<vxe-option
v-for="item in sexList"
:key=""
:value=""
:label=""
></vxe-option>
</vxe-select>
</template>
</vxe-column>
<vxe-column
field="province"
title="省份"
width="100"
:edit-render="{ name: 'input' }"
:filters="[{ data: '' }]"
:filter-method="filterProvince"
>
<template #filter="{ $panel, column }">
<input
type="type"
v-for="(option, index) in "
:key="index"
v-model=""
@input="$($event, !!, option)"
/>
</template>
</vxe-column>
<vxe-column field="city" title="城市" width="100" :edit-render="{ name: 'input' }"></vxe-column>
<vxe-column field="quit" title="离职" width="100">
<template #default="{ row }">
<a-checkbox :checked="" @change="quitChange(row)"></a-checkbox>
</template>
</vxe-column>
<vxe-column title="操作" fixed="right" width="100">
<template #default="{ row }">
<a-popconfirm
title="你确定要删除此条数据吗？"
ok-text="Yes"
cancel-text="No"
@confirm="confirmDelete(row)"
>
<vxe-button type="text" status="primary" content="删除"></vxe-button>
</a-popconfirm>
</template>
</vxe-column>
</vxe-table>
<!-- 省份对话框 -->
<a-modal
v-model="provinceModal"
title="省份"
@ok="provinceModalClose"
ok-text="确定"
cancel-text="取消"
destroy-on-close
>
<a-tree :treeData="provinceTree" @select="provinceTreeSelect" defaultExpandAll></a-tree>
</a-modal>
<!-- 城市对话框 -->
<a-modal
v-model="cityModal"
title="省份"
@ok="cityModalClose"
ok-text="确定"
cancel-text="取消"
destroy-on-close
>
<vxe-table
border
ref="xTable1"
:data="cityTable"
:radio-config="{highlight: true}"
@radio-change="radioChange"
>
<vxe-column type="radio" width="60"></vxe-column>
<vxe-column field="city" title="城市"></vxe-column>
</vxe-table>
</a-modal>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 1001,
name: '小红',
age: 23,
sex: 0,
province: '广东省',
city: '广州',
quit: false
},
{
id: 1002,
name: '小白',
age: 26,
sex: 1,
province: '山东省',
city: '青岛',
quit: true
}
],
sexList: [{ key: 0, value: '女' }, { key: 1, value: '男' }],
selectRow: {}, // 选中某行
provinceModal: false, // 省份对话框
provinceTree: [], // 省份树数据
cityModal: false, // 城市对话框
treeSelect: '', // 省份树节点选择
cityTable: [], // 城市表格数据
cityData: [
{
province: '广东省',
city: ['广州', '珠海'],
}, {
province: '山东省',
city: ['青岛', '济南'],
}, {
province: '北京',
city: ['海淀区', '朝阳区', '昌平区'],
}, {
province: '黑龙江',
city: ['哈尔滨', '七台河', '佳木斯'],
},
],
citySelect: '' // 城市表格选择
}
},
mounted() {
// 异步加载筛选数据
setTimeout(() => {
const $table = this.$refs.xTable
if ($table) {
const nameColumn = $table.getColumnByField('name')
if (nameColumn) {
$table.setFilter(nameColumn, [
{ label: 'id大于1000', value: 1000 },
{ label: 'id大于1004', value: 1004 }
])
}
}
}, 500)
},
methods: {
/* 功能：格式化性别 */
formatSex(value) {
let result = this.sexList.filter(item => item.key === value)
return result[0].value
},
/* 功能：离职多选框变化 */
quitChange(row) {
row.quit = !row.quit
},
/* 功能：姓名列筛选 */
filterName({ value, row }) {
return row.id >= value
},
/* 功能：省份列筛选 */
filterProvince({ option, row }) {
return row.province.includes(option.data)
},
/* 功能：点击表格的单元格 */
cellClick({ row, column }) {
this.selectRow = row
if (column.property === 'province') {
this.getprovinceTree()
this.provinceModal = true
} else if (column.property === 'city') {
if (this.selectRow.province === '') {
this.$message.warning('请先选择省份！');
} else {
this.getCityTable()
this.cityModal = true
}
}
},
/* 功能：省份对话框确认 */
provinceModalClose() {
this.selectRow.province = this.treeSelect
this.treeSelect = ''
this.provinceModal = false
},
/* 功能：城市对话框确认 */
cityModalClose() {
this.selectRow.city = this.citySelect
this.citySelect = ''
this.cityModal = false
},
/* 功能：获取省份树数据 - 为了模拟调接口 */
getprovinceTree() {
this.provinceTree = []
let data = {
title: '中国',
key: 'china',
children: [
{
title: '广东省',
key: 'gd',
}, {
title: '山东省',
key: 'sd',
}, {
title: '北京',
key: 'bj',
}, {
title: '黑龙江省',
key: 'hlj',
},
]
}
this.provinceTree.push(data)
},
/* 功能：省份树节点选择 */
provinceTreeSelect(selectedKeys, info) {
// 将选中的省份赋值给表格
this.treeSelect = info.node.dataRef.title
// 此处不做城市清空操作（自行优化）
},
/* 功能：获取城市表格数据 */
getCityTable() {
// 获取对应城市的数据
let data = this.cityData.filter(item => item.province === this.selectRow.province)
// 修改数据格式
this.cityTable = data[0].city.map(item => {
let obj = {}
obj['city'] = item
return obj
})
},
/* 功能：城市表格单选变化 */
radioChange({ row }) {
this.citySelect = row.city
},
/* 功能：添加行记录 */
add() {
let newId = 1001 + this.tableData.length
let newData = {
id: newId,
name: '',
age: '',
sex: 0,
province: '',
city: '',
quit: false
}
this.tableData.unshift(newData)
this.$message.success('新增成功！');
},
/* 功能：删除一行记录 */
confirmDelete(row) {
let newData = this.tableData.filter(item => item.id !== row.id)
this.tableData = newData
this.$message.success('删除成功！');
},
}
}
</script>
<style>
.box {
margin: 50px;
width: 700px;
}
.addBtn {
margin: 5px;
cursor: pointer;
}
</style>