element 表格中展示表单

tianyawhl

发布于 2024-04-25 06:53:48

14900

代码可运行

文章被收录于专栏：前端之攻略前端之攻略

运行总次数：0

代码可运行

编辑表格的内容，包含编辑头部及body的每行内容，以及增加行

<template>
  <div>
    <div>数据测试</div>
    <div v-for="(item,index) in dataObj.data" :key="index">
      <div>123 {{item.name}}</div>
      <el-input v-model="item.name"></el-input>
      <el-button @click="addLine(index)">新增行</el-button>
      <el-table :data="item.data" style="width: 100%;margin-bottom:20px;">
        <el-table-column v-for="(headerItem,headerIndex) in item.header"
          :key="headerIndex" :prop="headerItem.prop" :label="headerItem.name">
          <template #header>
            <el-input size="mini" v-model.trim="headerItem.name"></el-input>
          </template>
          <template slot-scope="scope">
            <el-input size="mini" v-model.trim="scope.row[headerItem.prop]">
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-button @click="handleTest">test</el-button>
  </div>

</template>
<script>
export default {
  components: {},
  data() {
    return {
      input: "",
      dataObj: {},
    };
  },
  watch: {},
  mounted() {
    let data1 = {
      data: [
        {
          data: [
            {
              num: 12,
              num1: 15,
              name: "名称1",
              quality: 20,
            },
            {
              num: 12,
              num1: 15,
              name: "名称2",
              quality: 20,
            },
            {
              num: 12,
              num1: 15,
              name: "名称3",
              quality: 20,
            },
            {
              num: 12,
              num1: 15,
              name: "名称4",
              quality: 20,
            },
          ],
          name: "名称1",
          header: [
            {
              prop: "name",
              name: "公司名称",
            },
            {
              prop: "quality",
              name: "用量",
            },
            {
              prop: "num",
              name: "数量",
            },
            {
              prop: "num1",
              name: "数量1",
            },
          ],
        },
        {
          data: [
            {
              num: 15,
              num1: 15,
              name2: "公司名称公司名称",
              quality: 20,
            },
            {
              num: 11,
              num1: 15,
              name2: "公司名称2",
              quality: 25,
            },
            {
              num: 12,
              num1: 15,
              name2: "公司名称3",
              quality: 20,
            },
            {
              num: 12,
              num1: 15,
              name2: "公司名称3",
              quality: 20,
            },
            {
              num: 12,
              num1: 15,
              name2: "公司名称3",
              quality: 20,
            },
            {
              num: 12,
              num1: 15,
              name2: "公司名称3",
              quality: 20,
            },
            {
              num: 12,
              num1: 15,
              name2: "公司名称3",
              quality: 20,
            },
          ],
          name: "名称2",
          header: [
            {
              prop: "name2",
              name: "公司名称2",
            },
            {
              prop: "quality",
              name: "用量",
            },
            {
              prop: "num",
              name: "数量",
            },
            {
              prop: "num1",
              name: "数量1",
            },
          ],
        },
      ],
    };
    this.dataObj = data1;
  },
  methods: {
    handleTest() {
      console.log(this.dataObj);
    },
    addLine(index){
      let obj ={}
      console.log(this.dataObj.data[index].header)
      this.dataObj.data[index].header.forEach(item => {
        obj[item.prop] = ""
      });
      console.log(obj)
      this.dataObj.data[index].data.push(obj)
    }
  },
  watch:{
    dataObj:{
      handler(val){
        console.log(val)
      },
      deep:true
    }
  }
};
</script>
<style>

</style>