表格新增行,可编辑删除行

html 复制代码
    <button type="button" style="margin-bottom:10px;" class="btn btn-primary" @click="addAddress"><i
            class="fa fa-plus"></i></button>
    <table class="table table-bordered">
        <tbody>
            <tr>
                <th style="width: 140px; text-align:center;">地址类型</th>
                <th>地址信息</th>
                <th style="width: 120px; text-align:center;">邮编</th>
                <th style="width: 120px; text-align:center;">操作</th>
            </tr>
            <tr v-for="(item, index) in addressList" :key="index">
                <td>
                    <span v-if="!item.isEdit">{{item.type}}</span>
                    <input v-else v-model="item.type" class="form-control" placeholder="请输入地址类型">
                </td>
                <td>
                    <span v-if="!item.isEdit">{{item.address}}</span>
                    <input v-else v-model="item.address" class="form-control" placeholder="请输入地址">
                </td>
                <td>
                    <span v-if="!item.isEdit">{{item.zipCode}}</span>
                    <input v-else v-model="item.zipCode" class="form-control" placeholder="请输入邮编">
                </td>
                <td>
                    <button v-if="item.isEdit" type="button" class="btn btn-default"
                        @click="handleEditAddress(index, false)"><i class="fa fa-check"></i></button>
                    <button v-else type="button" class="btn btn-default" @click="handleEditAddress(index, true)"><i
                            class="fa fa-edit"></i></button>
                    <button type="button" class="btn btn-default" style="margin-left:10px;"
                        @click="delAddress(index)"><i class="fa fa-times"></i></button>
                </td>
            </tr>
        </tbody>
    </table>
javascript 复制代码
const VueApp = {
	setup() {
		const empiData = Vue.ref({
		
		});
		const addressList = Vue.ref([
			{
				"type": "工作单位地址",
				"address": "山东省青岛市市北区福州北路浮山后街道23号",
				"zipCode": "26000",
				"isEdit": false
			},
			{
				"type": "户口地址",
				"address": "山东省青岛市市北区福州北路浮山",
				"zipCode": "26001",
				"isEdit": false
			},
			{
				"type": "籍贯地址",
				"address": "山东省青岛市市北区福州北路浮山",
				"zipCode": "26001",
				"isEdit": false
			}
		]);
		const addAddress = () => {
			for(let i in addressList.value){
				addressList.value[i].isEdit = false;
			}
			addressList.value.push({
				"type": "",
				"address": "",
				"zipCode": "",
				"isEdit": true
			});
		};
		const delAddress = (index) => {
		  addressList.value.splice(index, 1);
		};
		const handleEditAddress = (index, flag) => {
		  addressList.value[index].isEdit = flag;
		};
		return {
			empiData,
			addressList,
			handleEditAddress,
			addAddress,
			delAddress
		};
	},
};
const app = Vue.createApp(VueApp);
app.use(naive);
app.mount("#vue-app");
相关推荐
江团1io031 分钟前
深入解析TCP核心机制:连接管理、流量与拥塞控制
服务器·网络·tcp/ip
AD钙奶-lalala34 分钟前
Mac OS上搭建 http server
java
知白守黑26739 分钟前
Ansible角色
运维·服务器·ansible
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲1 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel4 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip4 小时前
JavaScript事件流
前端·javascript
皮皮林5514 小时前
SpringBoot 全局/局部双模式 Gzip 压缩实战:14MB GeoJSON 秒变 3MB
java·spring boot