首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在element中使用表格遇到的问题?

在element中使用表格遇到的问题?

提问于 2018-12-30 21:19:36
回答 1关注 0查看 574
代码语言:javascript
复制
<template>
  <div class="container">
    <el-table
      :data="form.list"
      stripe
      border
      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>

<style scoped>
</style>
相关文章

相似问题

相关问答用户
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档