vue配合elementUI开发中...( 值与址的问题?)

在vue结合elementUI开发后台管理系统中，遇到的一个问题，问题的简述：

先看最终的需要的结果

代码语言：javascript复制

<template>
  <div class="container">
    <el-table
      :data="form.list"
      stripe
      borde
      max-width="100%">
      <el-table-column
        type="index"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="180">
        <template slot-scope="scope">
          <el-input v-model="form.list[scope.$index].name"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(col,index) in contents"
        :label="col.name" :key="col.prop">
        <!--<span>{{row.index}}</span>-->
        <template slot-scope="scope">
          <!--<span>{{scope.$index}}</span>-->
          <el-select v-model="form.list[scope.$index].results[index].state">
            <el-option label="0" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述"
        width="180">
        <template slot-scope="scope">
          <el-input v-model="form.list[scope.$index].description"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addRow">添加行</el-button>
    <el-button type="primary" @click="addColoum">添加列</el-button>
  </div>

</template>

<script>
export default {
  name: 'mytable',
  data () {
    return {
      count: '2',
      contents: [
        {
          name: '英语',
          value: '01'
        },
        {
          name: '数学',
          value: '02'
        }
      ],
      form: {
        list: [
          {
            name: '',
            description: '',
            results: [
              {
                id: '01',
                state: '1'
              },
              {
                id: '02',
                state: '1'
              }
            ]
          },
          {
            name: '',
            description: '',
            results: [
              {
                id: '01',
                state: '1'
              },
              {
                id: '02',
                state: '1'
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
</style>

这是需要的结果

但是，数据是在data里构造的，但是业务需求里并不知道表格的数据，只是知道表格的列的内容，即 data里的contents，

代码语言：javascript复制

data () {
    return {
      count: '2',
      contents: [
        {
          name: '英语',
          value: '01'
        },
        {
          name: '数学',
          value: '02'
        }
      ],
      form: {
        list: []
          }
        ]
      }
    }
  },

所以要通过data里的 contents 构造表格的数据如下，通过function构造data里的list，list最终是需要提交的

代码语言：javascript复制

  list: [
          {
            name: '',
            description: '',
            results: [
              {
                id: '01',//第一个检查内容的 id
                state: '1'//将选择的默认状态设置为1 0:不及格，1：及格，2：优秀
              },
              {
                id: '02',//第二个检查内容的 id
                state: '1'
              }
            ]
          },
          {
            name: '',
            description: '',
            results: [
              {
                id: '01',
                state: '1'
              },
              {
                id: '02',
                state: '1'
              }
            ]
          }
        ]

所以，构造代码如下

代码语言：javascript复制

<template>
  <div class="container">
    <el-table
      :data="form.list"
      stripe
      borde
      max-width="100%">
      <el-table-column
        type="index"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="180">
        <template slot-scope="scope">
          <el-input v-model="form.list[scope.$index].name"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(col,index) in contents"
        :label="col.name" :key="col.prop">
        <!--<span>{{row.index}}</span>-->
        <template slot-scope="scope">
          <!--<span>{{scope.$index}}</span>-->
          <el-select v-model="form.list[scope.$index].results[index].state">
            <el-option label="0" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述"
        width="180">
        <template slot-scope="scope">
          <el-input v-model="form.list[scope.$index].description"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addRow">添加行</el-button>
    <el-button type="primary" @click="addColoum">添加列</el-button>
  </div>

</template>
<script>
export default {
  name: 'mytable',
  data () {
    return {
      count: '2',
      contents: [
        {
          name: '英语',
          value: '01'
        },
        {
          name: '数学',
          value: '02'
        }
      ],
      form: {
        list: []
      }

    }
  },
  created () {
    this.createData()
  },
  methods: {
    createData () {
      var temp = [], t = null ,list_temp = null;
      this.contents.forEach(el => {
        t = {
          id: el.value,
          state: '1'
        }
        // temp.push(JSON.parse(JSON.stringify(t)))
        temp.push({...t})
      })

      list_temp = {
        name: '',
        description: '',
        results: temp.concat()
      }

      for (var i = 0; i < this.count; i  ) {
        this.form.list.push(
          {...list_temp}
        )
      }

      console.log(this.form.list[0] === this.form.list[1]) //false
      console.log(this.form.list[0].results[0] === this.form.list[1].results[0])//true

    },
    //动态添加行
    addRow () {
      this.form.list.push({})
    },
    //动态添加列
    addColoum () {

    }
  }

}
</script>

最后的结果是第一行d和第二行的列内容，竟然同时改变，

后来打印发现

代码语言：javascript复制

//list为array,
//list中的results为array
//results 中的每一项为对象类型
console.log(this.form.list[0] === this.form.list[1])//false 
console.log(this.form.list[0].results[0] === this.form.list[1].results[0])//true

这是为什么？？？？？？

追加：

在通过data里的contents生成数据的时候

代码语言：javascript复制

createData () {
      var temp = [], t = null ,list_temp = null;
      this.contents.forEach(el => {
        t = {
          id: el.value,
          state: '1'
        }
        temp.push({...t})
      })

      list_temp = {
        name: '',
        description: '',
        results: temp.concat()
      }

      for (var i = 0; i < this.count; i  ) {
        this.form.list.push(
         JSON.parse(JSON.stringify(list_temp)) // 在添加到list的时候先序列化一下，在反序列化，这样就解决了引用为同一地址的问题
        )
      }

      console.log(this.form.list[0] === this.form.list[1]) //false
      console.log(this.form.list[0].results[0] === this.form.list[1].results[0])//false

data function list 表格

0 人点赞