Tmr-Admin-BeefCattle/src/componentChart/ChartTable.vue

<template>
  <div class="app-table">
   
        <div class="table">
          <el-table
            :key="tableObj.tableKey"
            v-loading="tableObj.listLoading"
            element-loading-text="给我一点时间"
            :data="tableObj.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed" 
          >
         
            <el-table-column label="序号" align="center" type="index" width="50px">
              <template slot-scope="scope">
                <span v-if="tableObj.pageNum">{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
                <span v-else>1</span>
              </template>
            </el-table-column>


      



            <el-table-column label="分日日期/维度" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.date }}</span>
              </template>
            </el-table-column>


            <!-- <el-table-column label="混料数据" min-width="130px" align="center">
              <el-table-column label="理论重量" min-width="130px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.drivercode }}</span>
                </template>
              </el-table-column>
              <el-table-column label="实际重量" min-width="130px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.drivercode }}</span>
                </template>
              </el-table-column>
              <el-table-column label="误差值" min-width="130px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.drivercode }}</span>
                </template>
              </el-table-column>
            </el-table-column> -->

            <el-table-column :label="item.label" min-width="130px" align="center" v-for=" (item,index) in tableHead">

              <el-table-column :label="items.label" :property="item.value" min-width="130px" align="center" v-for=" (items,indexs) in item.children">
                <template slot-scope="scope">
                  <span>{{ scope.row[items.value] }}</span>
                </template>
              </el-table-column>
               
            </el-table-column>

            
           
           
           
          </el-table>
          <pagination v-show="tableObj.total>0" :total="tableObj.total" :page.sync="tableObj.getDataParameters.offset" :limit.sync="tableObj.getDataParameters.pagecount" @pagination="getList" />
        </div>
   
   
  </div>
</template>

<script>
import { GetDataByName } from '@/api/common'
import draggable from 'vuedraggable'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import Pagination from '@/components/Pagination'



export default {
  name: 'ChartTable',
  components: { Pagination },

  props: {
   
  },
  data() {
    return {

      tableHead:[
        { 
          value: 'txt1',label: '混料数据',
          children: [
            { value: 'txt11', label: '理论重量-合计'}, 
            { value: 'txt12', label: '理论重量-平均'}, 
            { value: 'txt13', label: '理论重量-最大值'}, 
          ]
        },
        { 
          value: 'txt2',label: '撒料数据',
          children: [
            { value: 'txt21', label: '理论重量-合计'}, 
            { value: 'txt22', label: '理论重量-平均'}, 
            { value: 'txt23', label: '理论重量-最大值'}, 
          ]
        }
      ],
      tableObj: {
         getDataParameters: {
          name: 'getDriverList',
          page: 1,
          offset: 1,
          pagecount: parseInt(Cookies.get('pageCount')),
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            dateType:'',
            type: '',
            dimension: '',
            mixture: [],
            spread: [],
          }
        },
        tableKey: 0,
        list: [
           { id:1,date:1212,txt11:11,txt12:12,txt13:13,txt21:21,txt22:22,txt23:23,},
            { id:1,date:1212,txt11:11,txt12:12,txt13:13,txt21:21,txt22:22,txt23:23,},
             { id:1,date:1212,txt11:11,txt12:12,txt13:13,txt21:21,txt22:22,txt23:23,}
        ],
        total: 0,
        listLoading: false,
        temp: {}
      },

  

      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  created() {
    this.getList()
  },
  methods: {
   
    getList() {

     
      //this.tableObj.listLoading = true
      // GetDataByName(this.tableObj.getdataListParm).then(response => {
      //   console.log('table数据', response.data.list)
      //   if (response.data.list !== null) {
      //     this.tableObj.list = response.data.list
      //     this.tableObj.pageNum = response.data.pageNum
      //     this.tableObj.pageSize = response.data.pageSize
      //     this.tableObj.total = response.data.total
      //   } else {
      //     this.tableObj.list = []
      //   }
      //   setTimeout(() => {
      //     this.tableObj.listLoading = false
      //   }, 100)
      // })

      this.tableObj.listLoading = false
     
    },

  
   
    
  }
}
</script>

<style  lang="scss" scoped>
 .search{margin-bottom: 10px;}
</style>