historyDialog.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <el-dialog
  3. title="本次对应记录"
  4. :visible.sync="dialogVisible"
  5. width="80%"
  6. @close="handleClose"
  7. id="historyAction"
  8. custom-class="act-history"
  9. >
  10. <span>提示:可使用Contorl+F 搜索关键字</span>
  11. <div>
  12. <el-table
  13. :data="tableData"
  14. :span-method="objectSpanMethod"
  15. border
  16. style="width: 100%; margin-top: 20px"
  17. >
  18. <el-table-column prop="id" label="ID" width="180"></el-table-column>
  19. <el-table-column prop="name" label="姓名"></el-table-column>
  20. <el-table-column prop="amount1" label="数值 1(元)"></el-table-column>
  21. <el-table-column prop="amount2" label="数值 2(元)"></el-table-column>
  22. <el-table-column prop="amount3" label="数值 3(元)"></el-table-column>
  23. </el-table>
  24. </div>
  25. </el-dialog>
  26. </template>
  27. <script>
  28. export default {
  29. data() {
  30. return {
  31. dialogVisible: false, //弹窗显示与隐藏
  32. tableData: [
  33. {
  34. id: "12987122",
  35. name: "王小虎",
  36. amount1: "234",
  37. amount2: "3.2",
  38. amount3: 10
  39. },
  40. {
  41. id: "12987123",
  42. name: "王小虎",
  43. amount1: "165",
  44. amount2: "4.43",
  45. amount3: 12
  46. },
  47. {
  48. id: "12987124",
  49. name: "王小虎",
  50. amount1: "324",
  51. amount2: "1.9",
  52. amount3: 9
  53. },
  54. {
  55. id: "12987125",
  56. name: "王小虎",
  57. amount1: "621",
  58. amount2: "2.2",
  59. amount3: 17
  60. },
  61. {
  62. id: "12987126",
  63. name: "王小虎",
  64. amount1: "539",
  65. amount2: "4.1",
  66. amount3: 15
  67. }
  68. ] //数据list
  69. };
  70. },
  71. methods: {
  72. showDialog() {
  73. this.dialogVisible = true;
  74. },
  75. handleClose(done) {},
  76. objectSpanMethod() {},
  77. transform(){
  78. }
  79. }
  80. };
  81. </script>
  82. <style lang="scss" scoped>
  83. #historyAction {
  84. .act-history.el-dialog {
  85. max-height: 70%;
  86. overflow-y: auto;
  87. overflow-x: hidden;
  88. .action-item {
  89. line-height: 34px;
  90. background-color: #f2f2f2;
  91. .action-item-left {
  92. background-color: #fff;
  93. width: 44%;
  94. float: left;
  95. }
  96. .action-item-middle {
  97. background-color: #fff;
  98. width: 44%;
  99. float: left;
  100. margin-left: 1%;
  101. border-right: 1px solid #ccc;
  102. }
  103. .action-item-right {
  104. background-color: #fff;
  105. width: 10%;
  106. float: left;
  107. }
  108. .h-100 {
  109. height: calc(100% - 0);
  110. }
  111. }
  112. }
  113. }
  114. </style>