admin管理员组

文章数量:1130349

vxe

目录

• 一、界面展示
• 二、功能描述
• 三、代码实现
• • 1. 代码
  • 2.参数解释
• 四、库安装使用
• • 1. 安装教程
  • 2. 官方文档

一、界面展示

二、功能描述

• 添加：实现在表格头部添加一行记录，工号会自动生成，其他数据为空。
• 修改：点击表格单元格，可以实现修改指定字段内容，失焦自动保存修改后的数据。
• 删除：弹出确认对话框，点击 yes 后，删除当前行。
  
• 排序：年龄
• 筛选：性别、年龄、省份 >> 实现都不一样
• 操作列右固定：由于表格宽度是指定的，所以表格列信息显示不全。这里采用了操作列右固定的形式，左右拖拽滚动条即可显示隐藏列数据。
• 省份对话框：点击省份单元格，会弹出对话框，在对话框内显示省份树信息，选择某个节点，点击确定，省份自动填写到点击的单元格内。
  
• 城市对话框：点击城市单元格，会先进行此行省份数据是否为空。当省份为空时，弹出提示信息。省份不为空时，显示城市对话框，选择某行，点击确定，城市自动填写到点击的单元格内。
  

三、代码实现

1. 代码

<template><div><div class="box"><!-- 添加行数据按钮 --><div @click="add" class="addBtn"><a-icon type="plus" />添加</div><!-- 表格 --><vxe-tableref="xTable"auto-resizeshow-overflowheader-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-columnfield="name"title="姓名"width="100"align="center":edit-render="{ name: 'input' }":filters="[]":filter-method="filterName"></vxe-column><vxe-columnfield="age"title="年龄"width="100"align="center"sortable:edit-render="{ name: 'input' }"></vxe-column><vxe-columnfield="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="row.sex" transfer><vxe-optionv-for="item in sexList":key="item.key":value="item.key":label="item.value"></vxe-option></vxe-select></template></vxe-column><vxe-columnfield="province"title="省份"width="100":edit-render="{ name: 'input' }":filters="[{ data: '' }]":filter-method="filterProvince"><template #filter="{ $panel, column }"><inputtype="type"v-for="(option, index) in column.filters":key="index"v-model="option.data"@input="$panel.changeOption($event, !!option.data, 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="row.quit" @change="quitChange(row)"></a-checkbox></template></vxe-column><vxe-column title="操作" fixed="right" width="100"><template #default="{ row }"><a-popconfirmtitle="你确定要删除此条数据吗？"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-modalv-model="provinceModal"title="省份"@ok="provinceModalClose"ok-text="确定"cancel-text="取消"destroy-on-close><a-tree :treeData="provinceTree" @select="provinceTreeSelect" defaultExpandAll></a-tree></a-modal><!-- 城市对话框 --><a-modalv-model="cityModal"title="省份"@ok="cityModalClose"ok-text="确定"cancel-text="取消"destroy-on-close><vxe-tableborderref="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.xTableif ($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 = rowif (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.treeSelectthis.treeSelect = ''this.provinceModal = false},/* 功能：城市对话框确认 */cityModalClose() {this.selectRow.city = this.citySelectthis.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'] = itemreturn obj})},/* 功能：城市表格单选变化 */radioChange({ row }) {this.citySelect = row.city},/* 功能：添加行记录 */add() {let newId = 1001 + this.tableData.lengthlet 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 = newDatathis.$message.success('删除成功！');},}}
</script><style>
.box {margin: 50px;width: 700px;
}.addBtn {margin: 5px;cursor: pointer;
}
</style>

2.参数解释

1）vxe-table

属性名	说明	默认值 / 类型
height	表格的高度；支持铺满父容器或者固定高度，如果设置 auto 为铺满父容器（如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素）	number
max-height	表格的最大高度	number
auto-resize	自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）	false
header-align	所有的表头列的对齐方式	left, center, right
radio-change	只对 type=radio 有效，当手动勾选并且值发生改变时触发的事件	{ newValue, oldValue, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }
cell-click	单元格被点击时会触发该事件	{ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, triggerRadio, triggerCheckbox, triggerTreeNode, triggerExpandNode, $event }
sortable	是否允许列排序	false

2）column-config：列的默认参数

属性名	说明	默认值 / 类型
isHover	当鼠标移到列头时，是否要高亮当前列头	false
resizable	每一列是否启用列宽调整	false
isCurrent	当鼠标点击列头时，是否要高亮当前列	false
useKey	是否需要为每一列的 VNode 设置 key 属性（非特殊情况下不需要使用）	false
width	每一列的宽度	number, string
minWidth	每一列的最小宽度	number, string

3）edit-config：可编辑配置项

属性名	说明	默认值 / 类型
trigger	触发方式	manual（手动触发方式，只能用于 mode=row）,click（默认，点击触发编辑）,dblclick（双击触发编辑）
mode	编辑模式	cell（默认，单元格编辑模式）,row（行编辑模式）

4）row-config：行配置信息

属性名	说明	默认值 / 类型
isHover	当鼠标移到行时，是否要高亮当前行	false
isCurrent	当鼠标点击行时，是否要高亮当前行	false

四、库安装使用

1. 安装教程

ant Design 、vxe-table 安装教程

2. 官方文档

vxe-table文档
ant design 文档

vxe

目录

• 一、界面展示
• 二、功能描述
• 三、代码实现
• • 1. 代码
  • 2.参数解释
• 四、库安装使用
• • 1. 安装教程
  • 2. 官方文档

一、界面展示

二、功能描述

• 添加：实现在表格头部添加一行记录，工号会自动生成，其他数据为空。
• 修改：点击表格单元格，可以实现修改指定字段内容，失焦自动保存修改后的数据。
• 删除：弹出确认对话框，点击 yes 后，删除当前行。
  
• 排序：年龄
• 筛选：性别、年龄、省份 >> 实现都不一样
• 操作列右固定：由于表格宽度是指定的，所以表格列信息显示不全。这里采用了操作列右固定的形式，左右拖拽滚动条即可显示隐藏列数据。
• 省份对话框：点击省份单元格，会弹出对话框，在对话框内显示省份树信息，选择某个节点，点击确定，省份自动填写到点击的单元格内。
  
• 城市对话框：点击城市单元格，会先进行此行省份数据是否为空。当省份为空时，弹出提示信息。省份不为空时，显示城市对话框，选择某行，点击确定，城市自动填写到点击的单元格内。
  

三、代码实现

1. 代码

<template><div><div class="box"><!-- 添加行数据按钮 --><div @click="add" class="addBtn"><a-icon type="plus" />添加</div><!-- 表格 --><vxe-tableref="xTable"auto-resizeshow-overflowheader-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-columnfield="name"title="姓名"width="100"align="center":edit-render="{ name: 'input' }":filters="[]":filter-method="filterName"></vxe-column><vxe-columnfield="age"title="年龄"width="100"align="center"sortable:edit-render="{ name: 'input' }"></vxe-column><vxe-columnfield="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="row.sex" transfer><vxe-optionv-for="item in sexList":key="item.key":value="item.key":label="item.value"></vxe-option></vxe-select></template></vxe-column><vxe-columnfield="province"title="省份"width="100":edit-render="{ name: 'input' }":filters="[{ data: '' }]":filter-method="filterProvince"><template #filter="{ $panel, column }"><inputtype="type"v-for="(option, index) in column.filters":key="index"v-model="option.data"@input="$panel.changeOption($event, !!option.data, 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="row.quit" @change="quitChange(row)"></a-checkbox></template></vxe-column><vxe-column title="操作" fixed="right" width="100"><template #default="{ row }"><a-popconfirmtitle="你确定要删除此条数据吗？"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-modalv-model="provinceModal"title="省份"@ok="provinceModalClose"ok-text="确定"cancel-text="取消"destroy-on-close><a-tree :treeData="provinceTree" @select="provinceTreeSelect" defaultExpandAll></a-tree></a-modal><!-- 城市对话框 --><a-modalv-model="cityModal"title="省份"@ok="cityModalClose"ok-text="确定"cancel-text="取消"destroy-on-close><vxe-tableborderref="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.xTableif ($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 = rowif (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.treeSelectthis.treeSelect = ''this.provinceModal = false},/* 功能：城市对话框确认 */cityModalClose() {this.selectRow.city = this.citySelectthis.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'] = itemreturn obj})},/* 功能：城市表格单选变化 */radioChange({ row }) {this.citySelect = row.city},/* 功能：添加行记录 */add() {let newId = 1001 + this.tableData.lengthlet 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 = newDatathis.$message.success('删除成功！');},}}
</script><style>
.box {margin: 50px;width: 700px;
}.addBtn {margin: 5px;cursor: pointer;
}
</style>

2.参数解释

1）vxe-table

属性名	说明	默认值 / 类型
height	表格的高度；支持铺满父容器或者固定高度，如果设置 auto 为铺满父容器（如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素）	number
max-height	表格的最大高度	number
auto-resize	自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）	false
header-align	所有的表头列的对齐方式	left, center, right
radio-change	只对 type=radio 有效，当手动勾选并且值发生改变时触发的事件	{ newValue, oldValue, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }
cell-click	单元格被点击时会触发该事件	{ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, triggerRadio, triggerCheckbox, triggerTreeNode, triggerExpandNode, $event }
sortable	是否允许列排序	false

2）column-config：列的默认参数

属性名	说明	默认值 / 类型
isHover	当鼠标移到列头时，是否要高亮当前列头	false
resizable	每一列是否启用列宽调整	false
isCurrent	当鼠标点击列头时，是否要高亮当前列	false
useKey	是否需要为每一列的 VNode 设置 key 属性（非特殊情况下不需要使用）	false
width	每一列的宽度	number, string
minWidth	每一列的最小宽度	number, string

3）edit-config：可编辑配置项

属性名	说明	默认值 / 类型
trigger	触发方式	manual（手动触发方式，只能用于 mode=row）,click（默认，点击触发编辑）,dblclick（双击触发编辑）
mode	编辑模式	cell（默认，单元格编辑模式）,row（行编辑模式）

4）row-config：行配置信息

属性名	说明	默认值 / 类型
isHover	当鼠标移到行时，是否要高亮当前行	false
isCurrent	当鼠标点击行时，是否要高亮当前行	false

四、库安装使用

1. 安装教程

ant Design 、vxe-table 安装教程

2. 官方文档

vxe-table文档
ant design 文档

本文标签： vxe