本文主要是介绍vue 创建一个 表格，横向纵向都可以增加(减少)行和列，并且内容内容可以输入，标题可以修改，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
工作中有需要，就写下记录下（因为只是写了个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 创建一个 表格，横向纵向都可以增加(减少)行和列，并且内容内容可以输入，标题可以修改的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
