如何动态获取el-table表格中的列?

<template> 
<div id="menu-management" class="menu-management">
<!-- 表头查询 -->    
    <div class="contaniar-t">
      <el-date-picker
        v-model="searchForm.startTime"
        type="datetime"
        :editable="false"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择开始时间"
      />
      <el-date-picker
        v-model="searchForm.endTime"
        type="datetime"
        :editable="false"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择截至时间"
      />

      <el-select
        v-model="searchForm.deviceName"
        placeholder="选择设备名称"
        clearable
      >
        <el-option
          v-for="item in deviceNameList"
          :key="item.deviceName"
          :label="item.deviceName"
          :value="item.deviceName"
        />
      </el-select>
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </div>
<!-- 列表查询 -->  
    <div class="contaniar-b">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          v-for="(item, index) in titleData"
          :key="index"
          :label="item.Name"
          :property="item.Value"
        />
      </el-table>
      <el-pagination
        v-if="titleData.length>0"
        :current-page="pageNo"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeviceMaintenanceRecord',
  components: {
  },
  data() {
    return {
      searchForm: {
        startTime: '',
        endTime: '',
        deviceName: ''
      },
      deviceNameList: [],
      total: 0, // 总数
      pageNo: 1, // 第一页
      pageSize: 50, // 每页条数
      titleData: [],
      tableData: [],
      listLoading: false
    }
  },
  created() {
    // this.getRealTimeAlarmList()
    this.getSelectData()
  },
  mounted() {
    this.searchForm.endTime = this.getNow()
    this.searchForm.startTime = new Date(new Date().setDate(new Date().getDate() - 1))
    this.searchForm.startTime = this.dataFormat(this.searchForm.startTime)
  },
  methods: {
    // 格式化时间
    dataFormat(date) {
      // date是传入的时间
      let d = new Date(date)
      let month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
      let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
      let hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
      let min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
      let sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()

      let times =
        d.getFullYear() +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hours +
        ':' +
        min +
        ':' +
        sec

      return times
    },
    getNow() {
      var date = new Date()
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      h = h < 10 ? ('0' + h) : h
      let m = date.getMinutes()
      m = m < 10 ? ('0' + m) : m
      let s = date.getSeconds()
      s = s < 10 ? ('0' + s) : s
      var time = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
      return time // 时间 2023-04-19 13:10:20  想要字符串可以转一下toString
    },
    // 获取列表数据
    getRealTimeAlarmList() {
      this.listLoading = true
      let params = {
        deviceName: this.searchForm.deviceName,
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime,
        pagesIndex: this.pageNo,
        pagesSize: this.pageSize
      }
      this.$api.curveParams.queryCurveAlarm(params)
        .then(res => {
          if (res.statusCode === 200) {
            this.titleData = JSON.parse(res.data.titleData)
            this.tableData = JSON.parse(res.data.tableColumns)
            this.pageNo = res.data.pageIndex
            this.pageSize = res.data.pageSize
            this.total = res.data.resultCount
            this.listLoading = false
          } else {
            this.listLoading = false
            this.$message.error((res.extras === null ? '' : res.extras) + (res.errors === null ? '' : res.errors))
          }
        })
    },
    getSelectData() {
      this.$api.ngcConfiguration.queryDeviceList()
        .then(res => {
          if (res.statusCode === 200) {
            if (res.data && res.data.length > 0) {
              this.deviceNameList = res.data
              this.searchForm.deviceName = res.data[0].deviceName
              this.getRealTimeAlarmList()
            } else {
              this.deviceNameList = []
            }
          } else {
            this.$message.error((res.extras === null ? '' : res.extras) + (res.errors === null ? '' : res.errors))
          }
        })
    },
    handleSearch() {
      this.getRealTimeAlarmList()
    },
    /**
    * 分页处理
    */
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getRealTimeAlarmList()
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.getRealTimeAlarmList()
    }
  }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值