ZM—纵向复杂表单

电力机组弹框表单

组件名称：dv-dltk

---

效果图：
左侧表头固定，右侧数据，根据传入的数据自动控制大小、控制合并单元格的个数

---

问题

一开始想到的方法是用element UI进行编写，后来发现合并单元格要进行的判断太过于复杂，样式也不好调整，所以选择了原生的table编写。写的过程中，因为要求是右侧的关系是上下关联，一一对应的，
要知道列表渲染的时候都是横向的渲染数据，这次的要求是纵向的关联，最终敲定了单元格的合并有后台传过来的数控制，单写一个变量控制合并。具体如下：

table代码：

	<table v-for="(t,index) in tableConfList" :key="index" class="tab">
			<!-- thead是列表前三行数据 -->
            <thead>
            <tr id="frist">
                <td colspan="2">二级单位</td>
                <th v-for="(v,index) in t.first" :key="index" :colspan="v.colspan" :rowspan="v.rowspan">{{v.name}}</th>
            </tr>
            <tr>
                <td colspan="2">电厂</td>
                <th v-for="(v,index) in t.second" :key="index" :colspan="v.colspan" :rowspan="v.rowspan">{{v.name}}</th>
            </tr>
            <tr>
                <td colspan="2">机组</td>
                <th v-for="item in t.columns" :key="item.key">{{item.name}}</th>
            </tr>
            </thead>
            <!--tbody是下面三行数据 状态、装机容量为写死的，不会变化-->
            <tbody>
            <tr>
                <td rowspan="0">
                    <div style="width:180px;margin:0 -41px 0 44px;">运<br>行<br>情<br>况</div>
                </td>
                <td>状态</td>
                <td v-for="(item,key) in t.columns" :key="key"><img :src="picurl[item.state]"></td>
            </tr>
            <tr>
                <td>装机容量<br>(MW)</td>
                <td v-for="item in t.columns" :key="item.value">{{item.capacity || '-'}}</td>
            </tr>
            <tr>
                <td>出力系数<br>(%)</td>
                <td v-for="item in t.columns" :key="item.key"
                    :style="{ color:(item.exert > 80 ? '#54D9D1' : item.exert > 70 ? '#B9A1E6' : '#E092AC' ) }">
                    {{item.exert || '-'}}
                </td>
            </tr>
            </tbody>
        </table>

data内的数据格式：
数据太多，只拿了一部分

	tableConfList: [
                    {
                      columns: [
                        {
                          name: '#2',
                          key: 'DD_SS_29',
                          state: '2',
                          capacity:'660',
                          exert:'80.711',
                        },
                        {
                          name: '#1',
                          key: 'DD_SS_11',
                          state: 'A',
                          capacity:'660',
                          exert:'77.39',
                        },
                        {
                          name: '#3',
                          key: 'DD_SS_12',
                          state: 'A',
                          capacity:'660',
                          exert:'80.56',
                        }],
                      first: [{
                          name: '电力公司',
                          colspan: 14,
                      },
                      {
                          name: '新集公司',
                          colspan: 2,
                      },
                      {
                          name: '上海大屯',
                          colspan: 4,
                      }],
                      second: [{
                          name: '哈密电厂',
                          colspan: 2,
                      },
                      {
                          name: '北二电厂',
                          colspan: 2,
                      }
                      ],
                 }
            ],

methods内定义的方法
具体也不是很懂（大佬写的）
看懂了再补充

	init() {
                // 设置keyList
                this.tableConfList.forEach(p => {
                    // console.log(...p.columns)
                    this.keyList.push(...p.columns.map(c => {
                        // console.log(c)
                        // 设置offsetData
                        this.$set(this.offsetData, c.key, 0);
                        // console.log(this.offsetData)
                        return c.key
                    }));
                    // console.log(this.keyList)
                });
            },

标签：ZM,capacity,name,exert,colspan,纵向,表单,item,key
来源： https://blog.csdn.net/wangyu0513/article/details/113699337