luohe_fronted/src/pages/index/components/berth_use.vue

<template>
  <div class="body-wrapper">
<!--    <el-form class="form-wrapper" :inline="true" :model="formInline">-->
<!--      <el-row>-->
<!--        <el-col :span="8">-->
<!--          <el-form-item label="停车场名称:">-->
<!--            <el-input v-model="formInline.parkingName" placeholder="请输入"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <el-form-item>-->
<!--            <el-button type="primary" class="query-btn" @click="onSubmit">查询</el-button>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </el-form>-->
    <el-table :data="tableData" height="800" style="background: #2a2a2a;border-color: #333;">
      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
      </el-table-column>
    </el-table>
<!--    <div class="table-pagination">-->
<!--      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"-->
<!--                     :current-page.sync="pageNum" :page-size.sync="pageSize">-->
<!--      </el-pagination>-->
<!--    </div>-->
  </div>
</template>
<script>
import api from "@/api/audit.js";

export default {
  components: {},
  data() {
    return {
      columns: [
        {
          label: '停车场名称',
          key: 'carParkName'
        },
        {
          label: '星期一',
          key: 'day1Rate'
        },
        {
          label: '星期二',
          key: 'day2Rate'
        },
        {
          label: '星期三',
          key: 'day3Rate'
        },
        {
          label: '星期四',
          key: 'day4Rate'
        },
        {
          label: '星期五',
          key: 'day5Rate'
        },
        {
          label: '星期六',
          key: 'day6Rate'
        },
        {
          label: '星期天',
          key: 'day7Rate'
        },
      ],
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      dialogVisible: false,
      formInline: {
        parkingName: '',
      },
    }
  },
  mounted() {
    this.getTableData()
  },
  watch: {
  },
  methods: {
    getTableData() {
      const {pageNum, pageSize} = this
      api.bwlyfx({current: pageNum, size: pageSize, ...this.formInline}).then(res => {
        this.tableData = res.data || []
        // this.total = res.data.total
      })
    },
    // onSubmit () {
    //   this.getTableData()
    // },
    // handlePageChange() {
    //   this.getTableData()
    // },
  }
}
</script>
<style  lang="scss" scoped>

.form-wrapper {
  margin-bottom: 20px;
}
/deep/ .el-input__inner {
  background: #2d3744;
  border: none;
  border-radius: 0;
}
/deep/ .el-input__prefix{
  top: 8px;
}
/deep/ .el-select {
  height: 40px;
  .el-input__inner {
    height: 40px;
  }
  .el-input__prefix, .el-input__suffix {
    height: 40px;
  }

  /* 下面设置右侧按钮居中 */
  .el-input__suffix {
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
  /* 输入框加上上下边是 32px + 2px =34px */
  .el-input__icon {
    line-height: 0px;
  }
}
/deep/ .form-wrapper .el-button {
  background: linear-gradient(90deg,#0158d9,#3c97e4);
  width: 100px;
  height: 40px;
}
.body-wrapper {
  padding: 20px;
  background: #0c0c0c;
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
  .table-pagination{
    text-align: right;
  }
}
</style>