Tmr-Admin-BeefCattle/.svn/pristine/cf/cfc65d4ca15e41b4b13ea90b6a405a5fefa01d87.svn-base

<template>
  <div id="app">
    <div class="content">
      <div class="data-container" style="width:98%;margin:0 auto;">
        <h3>各牧场设备统计表:</h3>
        <el-table ref="interfaceTable" :data="dataList" border :row-style="rowStyle" :cell-style="cellStyle" style="width: 100%" :span-method="colspanMethod" :show-header="showHeader">
          <el-table-column label="一级分类" prop="pasture" align="center" width="160" />
          <el-table-column label="二级分类" prop="pasture1" align="center" />
          <el-table-column label="三级分类" prop="pasture2" align="center" width="160" />
          <el-table-column label="类型" prop="type" align="center" />
          <el-table-column label="宝鸡1" prop="pastureName1" align="center" />
          <el-table-column label="宝鸡2" prop="pastureName2" align="center" width="160" />
          <!-- <el-table-column label="物流公司" prop="companyName" align="center" />
          <el-table-column label="物流单号" prop="logisticsNo" align="center" width="160" />
          <el-table-column label="发货时间" prop="deliveryTime" align="center" width="140" />
          <el-table-column label="包裹信息" align="center" prop="arr">
            <template slot-scope="scope">
              <div v-if="scope.row.packageLong">
                <div v-for="(item, index) in scope.row.arr" :key="index">{{ item.msg }}</div>
              </div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column label="包材编号" prop="materialsCode" align="center" /> -->
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import datas from '../../data.js'
import { handleTableSpan, handleObjectSpanMethod } from '../../util.js'
export default {
  components: {},
  mixins: [],
  data() {
    return {
      border: false,
      showHeader: false,
      dataList: [],
      // 要合并的单元格的rowspan 数据
      rowspanObj: {},
      // 要纵向合并的单元格的key数组
      mergekeys: ['pasture', 'pasture1', 'pasture2', 'logisticsNo', 'arr', 'materialsCode'],
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  computed: {},
  watch: {
    dataList: function() {
      this.$nextTick(function() {
        this.$refs.interfaceTable.$el.background = 'red !important'
        console.log(this.$refs.interfaceTable.$el)
        console.log(this.$refs.interfaceTable)
      })
    }
  },
  created() {},
  mounted() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      this.dataList = datas
      console.log()

      // 先处理一下数据，拿到要合并单元格的 rowspan 数据
      this.rowspanObj = handleTableSpan(this.mergekeys, this.dataList)
      console.log(this.rowspanObj)
      // const length = 'mm'
      // const weight = 'g'
      // const arr = []

      // datas.forEach((element, index) => {
      //   element.arr = [
      //     { msg: '长：' + element.packageLong + `${length}` },
      //     { msg: '宽：' + element.packageWidth + `${length}` },
      //     { msg: '高：' + element.packageHeight + `${length}` },
      //     { msg: '重量：' + element.packageWeight + `${weight}` }
      //   ]
      //   element.expressPackCode = element.expressPackCode ? element.expressPackCode : '/'
      //   element.companyName = element.companyName ? element.companyName : '/'
      //   element.logisticsNo = element.logisticsNo ? element.logisticsNo : '/'
      //   element.deliveryTime = element.deliveryTime ? element.deliveryTime : '/'
      //   element.logisticsNo = element.logisticsNo ? element.logisticsNo : '/'
      //   element.materialsCode = element.materialsCode ? element.materialsCode : '/'
      // })
    },
    colspanMethod(tableObj) {
      return handleObjectSpanMethod(tableObj, this.mergekeys, this.rowspanObj, true)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>