工作中有需要，就寫下記錄下（因為只是寫了個demo,實際中沒有用就先這樣記錄下,很喜歡寫這種需求）

效果圖

我的預覽地址：https://rainning_z.gitee.io/table_from_add/index.html

我的碼云源碼：https://gitee.com/rainning_z/table_from_add.git

直接源碼

<template><div><h1>demo11</h1><div style="text-align: left"><div v-for="(item, i) in formTitle" style=";width: 100px ;display: inline-block;height: 50px;position: relative" ><input type="text" v-model="formTitle[i]" @input="changeTitle($event,i)" style=";width: 100px ;display: inline-block;height: 50px"><img style="width: 20px;height: 20px;position: absolute;top: 0px;right: 0px; ":src="delet" @click="deleteTitle(i)"/></div><button style="width: 50px ;display: inline-block;font-size: 30px; " @click="addCloumn">+</button><div v-for="(item, i) in formData" style="display: flex;"><div v-for="(ite, index) in formTitle" style="position: relative;width: 100px ;display: inline-block;height: 50px; "><input type="text" v-model="formData[i][index]" @input="changeData($event,i,index)"style="width: 100px ;display: inline-block;height: 50px"><img v-if="index==0" style="width: 20px;height: 20px;position: absolute;top: 0px;right: 0px; ":src="delet" @click="deleteData(i,index)"/></div></div><button @click="addRow" style="width: 50px ;display: inline-block;font-size: 30px; ">+</button></div></div> </template> <script>export default {data() {return {delet: require('./image/delet.png'),formTitle: ['name', 'sex', 'age'],formData: [[ "tom", '男', 12], [ "lili", '女' , 14]],tableData: {formData: this.formData,formTitle: this.formTitle},}},mounted() {},methods: {deleteTitle(i){this.formTitle.splice(i,1)this.formData.forEach(item=>{item.splice(i,1)})},deleteData(i){this.formData.splice(i,1)},changeTitle(event, i) {this.formTitle.splice(i,1,event.currentTarget.value)},changeData(event, i,index) {let data=this.formData[i]data[index]=event.currentTarget.value;this.formData.splice(i,1,data)},addCloumn() {this.formTitle.push("請輸入標題")},addRow() {this.formData.push({})}}}; </script>

?

?

?

?

總結

以上是生活随笔為你收集整理的vue 创建一个 表格，横向纵向都可以增加(减少)行和列，并且内容内容可以输入，标题可以修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。