以下代码只记录了关键部分的主要思路。
<template>
<div>
<a-modal
:mask-closable="false"
v-model="visibleModal"
centered
title="弹窗"
width="1000px"
:bodyStyle="{ height: '480px', overflow: 'auto' }">
<h3>标题</h3>
<a-table
:columns="columns"
:dataSource="data"
:pagination="false"
class="edit-table"
@change="handlerChange"
:loading="loading"
:rowKey="record => record.id">
<template slot="oneTd" slot-scope="text, record">
<div v-if="record.isEdit">
<a-input v-model="record.tdOne" placeholder="请输入" />
</div>
<div v-else>
{{ record.tdOne }}
</div>
</template>
<template slot="twoTd" slot-scope="text, record">
<div v-if="record.isEdit">
<a-select />
</div>
<div v-else>
{{ record.tdTwo }}
</div>
</template>
<template slot="threeTd" slot-scope="text, record">
<div v-if="record.isEdit">
<a-input-group compact class="td-ant-input-group">
<a-select default-value="1">
<a-select-option value="1">
TCP
</a-select-option>
<a-select-option value="2">
TCP1
</a-select-option>
</a-select>
<a-input v-model="record.tdThree[1]" />
</a-input-group>
</div>
<div v-else>
{{ record.tdThree[0] }} : {{ record.tdThree[1] }}
</div>
</template>
<template slot="action" slot-scope="text, record">
<div v-if="record.isEdit">
<a-button type="link" @click="toSaveTd(record.id)">保存</a-button>
</div>
<div v-else>
<a-button type="link" @click="toEditTd(record.id)">编辑</a-button>
</div>
</template>
</a-table>
<a-button type="dashed" icon="plus" block @click="handleAdd"><span>添加</span></a-button>
<template #footer>
<a-button key="submit" type="primary" @click="SumbitPop">确定</a-button>
</template>
</a-modal>
</div>
</template>
<script>
const data = [{
id: 10000000000001,
isEdit: false, // true 编辑 false 只读
tdOne: '1',
tdTwo: '2',
tdThree: ['3','301'],
}]
const columns = [{
title: 'oneTd'
dataIndex: 'tdOne',
width: 50,
ellipsis: true,
minWidth: 50,
scopedSlots: { customRender: 'oneTd' }
},
{
title: 'twoTd'
dataIndex: 'tdTwo',
width: 50,
ellipsis: true,
minWidth: 50,
scopedSlots: { customRender: 'twoTd' }
},
{
title: 'threeTd'
dataIndex: 'tdThree',
width: 50,
ellipsis: true,
minWidth: 50,
scopedSlots: { customRender: 'threeTd' }
}]
export default {
data() {
return {
data: data,
columns: columns
}
},
methods: {
//=============================弹窗添加一条表格数据
handleAddRule() {
let obj = {
id: 10000000000002,
isEdit: false, // true 编辑 false 只读
tdOne: '1',
tdTwo: '2',
tdThree: ['3','301'],
}
this.data.push(obj)
},
//=============================弹窗表格编辑栏
toEditTd(id) {
this.data.find((item) => {
if (item.id == id) {
item.isEdit = !item.isEdit
}
return item;
});
},
//=============================弹窗表格保存栏
toSaveTd(id) {
this.data.find((item) => {
if (item.id == id) {
item.isEdit = !item.isEdit
}
return item;
});
},
}
}
</script>
<style scoped="" lang="less">
.td-ant-input-group {
width: 100%;
display: flex;
}
.edit-table {
/deep/.ant-table td {
line-height: 32px;
}
}
</style>