123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- <template>
- <el-dialog
- title="本次对应记录"
- :visible.sync="dialogVisible"
- width="80%"
- @close="handleClose"
- id="historyAction"
- custom-class="act-history"
- >
- <span>提示:可使用Contorl+F 搜索关键字</span>
- <div>
- <el-table
- :data="tableData"
- :span-method="objectSpanMethod"
- border
- style="width: 100%; margin-top: 20px"
- >
- <el-table-column prop="id" label="ID" width="180"></el-table-column>
- <el-table-column prop="name" label="姓名"></el-table-column>
- <el-table-column prop="amount1" label="数值 1(元)"></el-table-column>
- <el-table-column prop="amount2" label="数值 2(元)"></el-table-column>
- <el-table-column prop="amount3" label="数值 3(元)"></el-table-column>
- </el-table>
- </div>
- </el-dialog>
- </template>
- <script>
- export default {
- data() {
- return {
- dialogVisible: false, //弹窗显示与隐藏
- tableData: [
- {
- id: "12987122",
- name: "王小虎",
- amount1: "234",
- amount2: "3.2",
- amount3: 10
- },
- {
- id: "12987123",
- name: "王小虎",
- amount1: "165",
- amount2: "4.43",
- amount3: 12
- },
- {
- id: "12987124",
- name: "王小虎",
- amount1: "324",
- amount2: "1.9",
- amount3: 9
- },
- {
- id: "12987125",
- name: "王小虎",
- amount1: "621",
- amount2: "2.2",
- amount3: 17
- },
- {
- id: "12987126",
- name: "王小虎",
- amount1: "539",
- amount2: "4.1",
- amount3: 15
- }
- ] //数据list
- };
- },
- methods: {
- showDialog() {
- this.dialogVisible = true;
- },
- handleClose(done) {},
- objectSpanMethod() {},
- transform(){
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- #historyAction {
- .act-history.el-dialog {
- max-height: 70%;
- overflow-y: auto;
- overflow-x: hidden;
- .action-item {
- line-height: 34px;
- background-color: #f2f2f2;
- .action-item-left {
- background-color: #fff;
- width: 44%;
- float: left;
- }
- .action-item-middle {
- background-color: #fff;
- width: 44%;
- float: left;
- margin-left: 1%;
- border-right: 1px solid #ccc;
- }
- .action-item-right {
- background-color: #fff;
- width: 10%;
- float: left;
- }
- .h-100 {
- height: calc(100% - 0);
- }
- }
- }
- }
- </style>
|