frontend/src/views/management/userEquipment/towerInformation/index.vue

<template>
  <div class="towerInformation">
    <div class="towerBox">
      <div class="towerBtnGroup">
        <el-button type="primary" icon="el-icon-plus">新增</el-button>
      </div>
      <div class="towerTable">
        <el-table
          ref="multipleTable"
          :data="towerTableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="calc(100% - 40px)"
          @selection-change="handleSelectionChange"
          @row-click="handleRowClick"
        >
          <el-table-column label="线路名称" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.lineName }}</template>
          </el-table-column>
          <el-table-column
            prop="lineId"
            label="线路编号"
            show-overflow-tooltip
            min-width="120"
          >
          </el-table-column>
          <el-table-column
            prop="id"
            label="id"
            show-overflow-tooltip
            min-width="120"
          >
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click.native.stop="handleResive(scope.row)"
                type="text"
                >修改</el-button
              >
              <el-button
                type="text"
                class="deleteText"
                @click.native.stop="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pageNation">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="pageSize"
            layout=" prev, pager, next, jumper,total"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      towerTableData: [
        {
          id: 3,
          name: null,
          lineId: 108,
          lineName: "线路",
        },
      ],
    };
  },
  created() {},
  methods: {
    //获取线路列表数据
  },
};
</script>
<style lang="less">
.towerInformation {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  padding: 16px 16px;
  background: @color-white;
  .towerBox {
    border: 1px solid #dddddd;
    height: calc(100% - 32px);
    padding: 16px;
    border-radius: 4px;
  }
  .towerBtnGroup {
    display: flex;
    justify-content: flex-end;
  }

  .towerTable {
    margin-top: 16px;
    height: calc(100% - 48px);
  }
}
</style>