antdesignvue嵌套表格及表格内部编辑的⽤法说明
实现效果：
因为pro⼿脚架中封装的s-table不⽀持expand和expandedRowsChange事件，⽆法实现根据展开节点获取其内部数据的需求，因此直接使⽤a-table组件
表格外层可以翻页，查询携带页码参数
<a-table
size="default"
rowKey="dict_id" //根据⾃⼰数据内部关键针设定
ref="table"
@expandedRowsChange="expandedRowsChange"
@expand="expand" // 展开表格节点操作
@change="change" // 外层表格中排序，翻页，修改页⾯数量等操作
:expandedRowKeys="expandedRowKeys" // 操作展开的节点
:pagination="pagination" // 页码参数
:columns="columns" // 表头
:dataSource="loadData" // 数据
>
<a-table
size="default"
rowKey="key"
slot="expandedRowRender" // 以内层⽅式展现
:columns="innerColumns"
:dataSource="data"
:pagination="false"
:loading="innerloading"
@change="innerhandleChange"
>
<template v-for="(col, i) in ['item_text', 'item_value', 'item_checked', 'item_remark', 'item_sort', 'item_status']" :slot="col" slot-scope="text, record">
<a-input
:key="col"
v-if="record.editable"
:value="text"
:placeholder="innerColumns[i].title"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>{{ text }}</template>
</template> // 内部表格可编辑模板
<template slot="operation" slot-scope="text, record">
<template v-if="record.editable">
<span v-if="record.isNew">
<a @click="saveRow(record)">添加</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要删除此⾏？" @confirm="remove(record.key)">
<a>删除</a>
</a-popconfirm>
</span>
<span v-else>
<a @click="saveRow(record)">保存</a>
</span>
</template> // 内部表格新增模板
<span v-else>
<a @click="toggle(record)">编辑</a>
</span>
</template>
</a-table>
<div
slot="expandedRowRender"
>
<a-button type="dashed" icon="plus" @click="newMember">新增属性</a-button> </div>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
</span>
</a-table>
主要数据：
expandedRowKeys: [],
// 表头
columns: [
{
title: '字典编码',
dataIndex: 'dict_code'
},
{
title: '字典名称',
dataIndex: 'dict_name'
},
{
title: '状态',
dataIndex: 'dict_status'
},
{
title: '字典描述',
dataIndex: 'dict_remark'
}, {
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
],
loadData: [],
innerColumns: [
{
title: '字段名',
dataIndex: 'item_text',
key: 'item_text',
width: '15%',
scopedSlots: { customRender: 'item_text' }
},
{
title: '字段值',
dataIndex: 'item_value',
key: 'item_value',
width: '15%',
scopedSlots: { customRender: 'item_value' }
},
{
title: '默认选中(0：否,1：是)',
dataIndex: 'item_checked',
key: 'item_checked',
width: '10%',
scopedSlots: { customRender: 'item_checked' }
},
{
title: '备注',
dataIndex: 'item_remark',
key: 'item_remark',
width: '20%',
scopedSlots: { customRender: 'item_remark' }
},
{
title: '排序号',
dataIndex: 'item_sort',
key: 'item_sort',
width: '10%',
sorter: true,
scopedSlots: { customRender: 'item_sort' }
},
title: '状态(1：正常,2：异常)',
dataIndex: 'item_status',
key: 'item_status',
width: '10%',
scopedSlots: { customRender: 'item_status' }
},
{
title: '操作',
key: 'action',
scopedSlots: { customRender: 'operation' }
}
],
data: [],
innerloading: false,
parameter: {
pageNo: 1,
pageSize: 10
},
// 排序参数
sortedInfo: null,
pagination: {
total: 1,
current: 1,
showTotal: total => `共 ${total} 条记录第 ${this.pagination.current} / ${il(total / this.pagination.pageSize)} 页`,
showQuickJumper: true,
showSizeChanger: true,
pageSize: 10
}
初始进⼊页⾯时，需要获取外层表格
使⽤初始参数parameter请求第⼀页数据，从返回数据中对pagination重置翻页组件内部参数，主要有当前页，页码总量，页码⼤⼩getDictList(this.parameter)
.then(res => {
if (de === '200') {
console.log(res)
this.loadData = res.data
al = alCount
this.pagination.current = res.pageNo
this.pagination.pageSize = res.pageSize
} else {
this.$(ssage)
}
})
展开外层数据节点获取内部数据：
antdesignvue 配置外部文件expand (expanded, record) {
if (expanded) {
}
console.log(expanded, record)
},
// 展开节点后获取内部表格数据
getDictItem (obj) {
let searchparam = { dict_id: pandedRowKeys[0] }
if (obj) { // 内部表格除了根据其⽗节点id查的条件外，还⽀持排序，因此需要整合排序参数
searchparam = Object.assign(searchparam, obj)
}
this.innerloading = true
getDictItemList(searchparam).then(res => {
if (de === '200') {
this.data = res.data
this.innerloading = false
} else {
this.$(ssage)
}
})
},
// 外层表格操作
change (pagination, filters, sorter) { // 对页⾯⼤⼩，筛选，排序等条件修改后重新查询数据
this.pagination = pagination
this.parameter.pageNo = pagination.current
this.parameter.pageSize = pagination.pageSize
console.log('pagination', pagination)
console.log('filters', filters)
console.log('sorter', sorter)
},
innerhandleChange (pagination, filters, sorter) {
console.log('Various parameters', pagination, filters, sorter)
this.sortedInfo = {
sortField: sorter.field,
sortOrder: der
}
},
⾄此，展⽰功能已经⼏乎做完啦，现在是内部表格的编辑与新增功能handleChange (value, key, column) { // 实时更新表格中各个输⼊框的状态
const newData = [...this.data]
const target = newData.filter(item => key === item.key)[0]
if (target) {
target[column] = value
this.data = newData
}
},
toggle (data) { // 切换输⼊框与⽂本状态，实现展⽰与编辑功能
const target = this.data.filter(item => item.key === data.key)[0]
target.editable = !target.editable
console.log(this.data)
},
newMember () { // 新增内容后的数据字段
this.data.push({
'item_text': '',
'item_value': '',
'item_checked': '',
'item_remark': '',
'item_sort': '',
'item_status': '',
key: this.data.length,
editable: true,
isNew: true
})
},
saveRow (record) {
this.innerloading = true
if (!record.item_text || !record.item_value) { // 对必填项进⾏管控
this.innerloading = false
this.$('请⾄少填写填写字段名和字段值。')
return
}
record.item_checked = record.item_checked || 0 // 设置默认值
record.item_sort = record.item_sort || 1
record.item_status = record.item_status || 1
record.dict_id = pandedRowKeys[0]
if (record.item_id) { // 修改
updateItem(record).then(res => {
if (de === '200') {
this.$message.ssage)
} else {
this.$(ssage)
}
})
} else {
addItem(record).then(res => {
if (de === '200') {
this.$message.ssage)
} else {
this.$(ssage)
}
})
}
},
cancel (key) {
const target = this.data.filter(item => item.key === key)[0]
target.editable = false
},
remove (key) {
const newData = this.data.filter(item => item.key !== key)
this.data = newData
},
/* 内层表格操作结束 */
外层表格与内存表格数据⽰例：
{
"success": true,
"message": "分页查询成功", "data": [{
"dict_id": 1,
"dict_code": "common_org_type", "dict_name": "机构类别", "dict_pid": null,
"dict_status": 1,
"dict_remark": "机构类别"
}, {
"dict_id": 2,
"dict_code": "common_user_type", "dict_name": "⼈员类别", "dict_pid": null,
"dict_status": 1,
"dict_remark": "⼈员类别"
}, {
"dict_id": 48,
"dict_code": "cdsfcsdcf", "dict_name": "修改属性1", "dict_pid": null,
"dict_status": 1,
"dict_remark": ""
}, {
"dict_id": 49,
"dict_code": "bugbugbug", "dict_name": "有字典id", "dict_pid": null,
"dict_status": 1,
"dict_remark": ""
}, {
"dict_id": 50,
"dict_code": "1",
"dict_name": "名称",
"dict_pid": null,
"dict_status": 1,
"dict_remark": "1"
}, {
"dict_id": 51,
"dict_code": "1",
"dict_name": "1",
"dict_pid": null,
"dict_status": 1,
"dict_remark": null
}, {
"dict_id": 52,
"dict_code": "1",
"dict_name": "1",
"dict_pid": null,
"dict_status": 1,
"dict_remark": null
}, {
"dict_id": 53,
"dict_code": "1",
"dict_name": "1",
"dict_pid": null,
"dict_status": 1,
"dict_remark": null
}, {
"dict_id": 54,
"dict_code": "1",
"dict_name": "1",
"dict_pid": null,
"dict_status": 1,
"dict_remark": ""
}, {
"dict_id": 55,
"dict_code": "dbhasuiuh", "dict_name": "测试字典1", "dict_pid": null,
"dict_status": 1,
"dict_remark": "备注"
}],
"totalCount": 11, "pageNo": 1, "pageSize": 10, "totalTag": 1
}
{
"success": true,
"code": "200", "message": "查询成功", "data": [{
发表评论