vue 创建一个表格，横向纵向都可以增加(减少)行和列，并且内容内容可以输入，标题可以修改

最新推荐文章于 2024-08-14 11:56:21 发布

rainning_z

最新推荐文章于 2024-08-14 11:56:21 发布

阅读量599

点赞数 1

分类专栏： vuejs学习之路

本文链接：https://blog.csdn.net/ruiti/article/details/112004171

版权

Vue.js 动态表格数据绑定事件处理前端开发

关键词由CSDN通过智能技术生成

vuejs学习之路专栏收录该内容

11 篇文章 0 订阅

订阅专栏

工作中有需要，就写下记录下（因为只是写了个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>