記一次用iview實現表格"合併"單元格的具體操做

記一次用iview實現表格"合併"單元格的具體操做

最近作項目使用iview框架作後臺管理系統，第一次使用iview遇到過不少問題，有些小坑也都在網上找到解決方案了，可做爲一個通用型框架不可能知足任憑你能想象到的功能的，但其實少了某些實際需求也何嘗不是件好事，能夠發揮咱們做爲程序員的想象空間，一開始總在table上下功夫，想着能不能用相似原生table同樣加上rowspan就能夠把改合併的合併起來，把該拆分的拆分開來，未果.....

廢話少嘮，直接上代碼

---

json數據

{
    "data": [{
        "list": [{
            "time_period_name": "上午上學",
            "normal_amount": 0,
            "be_late_amount": 1,
            "leave_early_amount": 0,
            "not_attendance_amount": 0
        }, {
            "time_period_name": "下午上學",
            "normal_amount": 0,
            "be_late_amount": 0,
            "leave_early_amount": 0,
            "not_attendance_amount": 1
        }, {
            "time_period_name": "下午放學",
            "normal_amount": 0,
            "be_late_amount": 0,
            "leave_early_amount": 0,
            "not_attendance_amount": 1
        }, {
            "time_period_name": "上午放學",
            "normal_amount": 0,
            "be_late_amount": 0,
            "leave_early_amount": 1,
            "not_attendance_amount": 0
        }],
        "grade_name": "幼兒園托兒班",
        "class_name": "幼兒園托兒班2班",
        "date": "2019-02-14",
        "student_name": "劉小明"
    }],
} ]
}

組件代碼

<Table :columns="columns" :data="reportList"  :loading="loading" border></Table>

data數據（重點來了）

columns:[
        {title:'年級',key:'grade_name',align:'center'},
        {title:'班級',key:'class_name',align:'center'},
        {title:'日期',key:'date',align:'center'},
        {title:'姓名',key:'student_name',align:'center'},
        {
            title: '考勤時段',
            key: 'list',
            align:'center',
            render: (h, params) => {
                return h('div', {
                  attrs: {
                      class:'subCol'
                  },
                }, [
                h('ul', this.reportList[params.index].list.map(item => {
                    return h('li', {
                    }, item.time_period_name)
                }))
              ]);
            }
        },
        {
            title: '正常',
            key: 'list',
            align:'center',
            render: (h, params) => {
              if(this.reportList[params.index].list[0].normal_amount!=undefined){
                return h('div', {
                  attrs: {
                      class:'subCol'
                  },
                }, [
                h('ul', this.reportList[params.index].list.map(item => {
                    return h('li', {
                    }, item.normal_amount)
                }))
              ]);
              }else{
                return h('div', [
                  h('span', '----'),
                ])
              }
            }
        },
        {
            title: '遲到',
            key: 'list',
            align:'center',
            render: (h, params) => {
              if(this.reportList[params.index].list[0].be_late_amount!=undefined){
                return h('div', {
                  attrs: {
                      class:'subCol'
                  },
                }, [
                h('ul', this.reportList[params.index].list.map(item => {
                    return h('li', {
                    }, item.be_late_amount)
                }))
              ]);
            }else{
              return h('div', [
                h('span', '----'),
              ])
            }
          }
        },
        {
            title: '早退',
            key: 'list',
            align:'center',
            render: (h, params) => {
              if(this.reportList[params.index].list[0].leave_early_amount!=undefined){
                  return h('div', {
                    attrs: {
                        class:'subCol'
                    },
                  }, [
                  h('ul', this.reportList[params.index].list.map(item => {
                      return h('li', {
                      }, item.leave_early_amount)
                  }))
                ]);
              }else{
                return h('div', [
                  h('span', '----'),
                ])
              }
            }
        },
        {
            title: '未考勤',
            key: 'list',
            align:'center',
            render: (h, params) => {
              if(this.reportList[params.index].list[0].not_attendance_amount!=undefined){
                return h('div', {
                  attrs: {
                      class:'subCol'
                  },
                }, [
                h('ul', this.reportList[params.index].list.map(item => {
                    return h('li', {
                    }, item.not_attendance_amount)
                }))
              ]);
              }else{
                return h('div', [
                  h('span', '----'),
                ])
              }
            }
        },
      ],

再配合css樣式哈

.subCol>ul>li{
      margin:0 -18px;
      list-style:none;
      text-align: center;
      padding: 9px;
      border-bottom:1px solid #ccc;
      overflow-x: hidden;
}
.subCol>ul>li:last-child{
  border-bottom: none
}

實現效果

---

代碼完畢！！！！

代碼不是很好看哈，相信看完的看官已經發現了，這根本不是什麼合併單元格的操做嘛，emmmmmmmmmmm，其實整理這篇筆記的目的不在於花哨的展現本身淺薄的技能，只是就開發過程當中遇到的一些坎兒和解決方法分享出來，起初本身一直在「合併」和「拆分」表格上下功夫，結果就是糾纏許久也沒有實現想要的效果，曲線救國強行拆分，佈局也沒有翻車，初步知足需求，總之也算是一種解決問題的方法，僅供參考！
附頁面地址github