LiaoningChanpinHuaxiang/src/views/bigpage/bigcomponents/ChangeinformationList.vue

<template>
  <div class="Basic-box" ref="basic">
    <el-table
      :data="tableData"
      v-loading="load1"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :height="height"
      stripe
      style="width: 100%; background-color: transparent"
    >
      <el-table-column
        v-for="(item, index) in tableHeader1"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width || ''"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
    </el-table>
    <div ref="pagination">
      <Pagination
        :total="total"
        :page="query.current"
        :limit="query.size"
        @pagination="changeList"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import { getDrugChange } from "@/api/largeScreen";
import Pagination from "@/views/components/Pagination";
export default {
  name: "Basicbox",
  components: { Pagination },
  data() {
    return {
      tableHeader1: [
        {
          prop: "bgxm",
          label: "变更项目",
          // width: "100",
        },
        {
          prop: "bgsx",
          label: "变更事项",
        },
        {
          prop: "bgsj",
          label: "变更时间",
          // width: "100",
        },
      ],
      // tableHeader2: [
      //   {
      //     prop: "bgxm",
      //     label: "变更内容",
      //   },
      //   {
      //     prop: "bgsj",
      //     label: "变更时间",
      //   },
      // ],
      tableData: [],
      query: {
        current: 1,
        size: 10,
        name: "",
      },
      total: 0,
      load1: false,
      height: 0,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.height =
        this.$refs.basic.offsetHeight - this.$refs.pagination.offsetHeight;
    });
    this.getList();
  },
  methods: {
    getList() {
      let newRouter = this.$route.query;
      this.query.name = newRouter.code;
      this.load1 = true;
      getDrugChange(this.query).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.load1 = false;
      });
    },
    changeList(e) {
      this.query.current = e.page;
      this.query.size = e.limit;
      this.getList();
    },
  },
  computed: {},
};
</script>
<style scoped lang='scss'>
.Basic-box {
  margin-top: 10px;
  max-width: 100%;
  height: calc(100% - 41px - 10px);
  // padding: 0 11px 11px 11px;
  overflow-y: auto;
  background-color: transparent;
}
::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
::v-deep .el-table th {
  background-color: rgba(0, 100, 255, 0.2) !important;
  color: #2492ff;
  border: none;
}
::v-deep .el-table td {
  border: none;
}
::v-deep .el-table::before {
  height: 0px;
}
::v-deep .el-table tr {
  background-color: transparent !important;
  color: #b7d4f5;
}
::v-deep .el-table tbody tr:hover td {
  background-color: transparent !important;
}
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border: none;
}
// 显示的颜色
::v-deep .el-table .el-table__body tr.el-table__row--striped td {
  background-color: rgba(0, 50, 150, 0.1) !important;
}
</style>