Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
426 views
in Technique[技术] by (71.8m points)

table合并代码没搞懂里面的变量问题

<template>
  <div>
    <center>
    <table border="1">
      <thead>
        <tr>
          <th>序号</th>
          <th>项目</th>
          <th>分类</th>
          <th>分项</th>
          <th>现场管理</th>
          <th>重大隐患</th>
          <th>汇总</th>
          <th>备注</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.id }}</td>
          <td :rowspan="item.projectspan" :class="{hidden: item.projectdis}">{{ item.project }}</td>
          <td :rowspan="item.typespan" :class="{hidden: item.typedis}">{{ item.type }}</td>
          <td>{{item.subentry}}</td>
          <td>{{item.nowManage}}</td>
          <td>{{item.Hidden}}</td>
          <td>{{item.Total}}</td>
          <td>{{item.remark}}</td>
        </tr>
        </tbody>
    </table>
    </center>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: '风险评估',
      isShow: false,
      isFinish: false,
      tableData: [
        {
          id: 1,
          project: '企业性质分类',
          type: '针对企业类别',
          subentry: '生产(危险化学品生产企业)Ⅰ类A、B、C、级',
          nowManage: '3.2',
          Hidden: '是',
          Total: '',
          remark: '备注备注'
        },
        {
          id: 2,
          project: '企业性质分类',
          type: '针对企业类别',
          subentry: '使用(兰炭及配套企业)Ⅱ类A、B、C、级',
          nowManage: '3.2',
          Hidden: '是',
          Total: '',
          remark: ''
        },
        {
          id: 3,
          project: '企业性质分类',
          type: '针对企业类别',
          subentry: '储存、经营(加油站)Ⅲ类A、B、C、级C、级',
          nowManage: '3.2',
          Hidden: '是',
          Total: '',
          remark: ''
        },
        {
          id: 4,
          project: '三同时执行情况',
          type: '针对改扩',
          subentry: '改扩建未执行',
          nowManage: '3.2',
          Hidden: '是',
          Total: '',
          remark: ''
        }
      ]
    }
  },
  created () {
    this.getData(this.tableData)
  },
  methods: {
    getData (list) {
      console.log(list, '==============')
      for (let item in list[0]) {
        let k = 0
        let i = 0
        while (k < list.length) {
          list[k][item + 'span'] = 1
          list[k][item + 'dis'] = false
          for (i = k + 1; i <= list.length - 1; i++) {
            if (list[k][item] === list[i][item] && list[k][item] !== '') {
              list[k][item + 'span']++
              list[k][item + 'dis'] = false
              list[i][item + 'span'] = 1
              list[i][item + 'dis'] = true
            } else {
              break
            }
          }
          k = i
        }
      }
      return list
    }
  }
}
</script>

<style scoped>
  .hidden{
    display: none
  }
</style>

我始终没有搞懂item.projectdisitem.typedis还有

image.png

this.tableData 里面没有那么多数据,但是打印的时候就莫名其妙的跑出很多属性,这是为什么?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

这不是很明显写在getData函数里面了吗

for (let item in list[0]) {

遍历列表里面第一个对象的属性

list[k][item + 'span'] = 1
list[k][item + 'dis'] = false

又在后面给列表里面的对象用遍历到的所有属性名加上后缀赋值了


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...