relatedSpaceList.vue 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <div id="relatedSpaceList" style="height:100%;">
  3. <div class="query">
  4. <el-input v-model="keyword" placeholder="请输入关键词" @keyup.enter.native="getSpaceList" style="width:240px;margin:0 0 0 10px;">
  5. <i slot="suffix" class="el-input__icon el-icon-search" @click="getSpaceList"></i>
  6. </el-input>
  7. <floorCascader @change="changeCascader"></floorCascader>
  8. </div>
  9. <div class="table-area" style="height:calc(100% - 52px)">
  10. <el-scrollbar style="height:calc(100% - 40px);">
  11. <el-table :data="tableData" style="width: 100%;height:100%;" v-loading="loading" :header-cell-style="headerStyle">
  12. <el-table-column prop='MeterFunc' label='业务空间建筑楼层' show-overflow-tooltip min-width="200" header-align='center' align="center">
  13. </el-table-column>
  14. <el-table-column prop='MeterFunc' label='业务空间类型' show-overflow-tooltip min-width="200" header-align='center' align="center">
  15. </el-table-column>
  16. <el-table-column prop='MeterFunc' label='业务空间本地名称' show-overflow-tooltip min-width="200" header-align='center' align="center">
  17. </el-table-column>
  18. <el-table-column prop='MeterFunc' label='业务空间本地编码' show-overflow-tooltip min-width="200" header-align='center' align="center">
  19. </el-table-column>
  20. <el-table-column prop='' label='操作' show-overflow-tooltip min-width="90" header-align='center' align='center'>
  21. <template slot-scope="scope">
  22. <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" plain icon="el-icon-delete"></el-button>
  23. </template>
  24. </el-table-column>
  25. </el-table>
  26. </el-scrollbar>
  27. <!-- 分页 -->
  28. <el-pagination @size-change="getSpaceList" @current-change="getSpaceList" :current-page="currentPage" :page-sizes="pageSizes"
  29. :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" style="float:right;">
  30. </el-pagination>
  31. </div>
  32. </div>
  33. </template>
  34. <script>
  35. import floorCascader from "@/components/ledger/lib/floorCascader";
  36. export default {
  37. data() {
  38. return {
  39. //表格头样式
  40. headerStyle: {
  41. backgroundColor: '#e1e4e5',
  42. color: '#2b2b2b',
  43. lineHeight: '30px'
  44. },
  45. pageSizes: [10, 20, 50, 100],
  46. pageSize: 50,
  47. currentPage: 1,
  48. keyword: '',//关键词
  49. floor: '',//当前楼层
  50. options: [],//楼层
  51. tableData: [],//表格数据
  52. loading: false,//加载
  53. }
  54. },
  55. components:{
  56. floorCascader
  57. },
  58. methods: {
  59. getSpaceList() {
  60. console.log(111)
  61. },
  62. changeCascader(val){
  63. console.log(val);
  64. }
  65. },
  66. props: {
  67. space: '',//空间id
  68. }
  69. }
  70. </script>
  71. <style lang="less" scoped>
  72. .query {
  73. padding: 10px 0px;
  74. }
  75. #relatedSpaceList {
  76. /deep/ .el-scrollbar__wrap {
  77. overflow-x: hidden;
  78. }
  79. }
  80. </style>