12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <template>
- <div style="height: 100%">
- <el-table
- :data="tableData"
- style="width: 100%"
- height="100%"
- ref="tableDom"
- class="adm-multi-table"
- :row-style="{ height: '10px' }"
- border
- v-if="tableData.length > 0"
- >
- <el-table-column prop="date" label="编辑" width="80" align="center" fixed>
- <template slot-scope="scope">
- <span class="el-icon-edit el-input__icon" style="cursor: pointer" @click="handleEdit(scope.$index, scope.row)"> </span>
- </template>
- </el-table-column>
- <el-table-column v-for="item in headersStage" :key="item.name" :label="item.name" align="center">
- <el-table-column
- v-for="(child, index) in item.data"
- :key="index"
- :label="child.unit ? child.name + ' (' + child.unit + ')': child.name"
- :prop="child.path"
- align="center"
- >
- </el-table-column>
- </el-table-column>
- </el-table>
- <div v-else class="center">暂无数据</div>
- </div>
- </template>
- <script lang="ts">
- import { ElTable } from "element-ui/types/table";
- import { Component, Emit, Prop, Ref, Vue, Watch } from "vue-property-decorator";
- @Component({
- name: "adm-multi-table",
- })
- export default class extends Vue {
- @Ref("tableDom") readonly tableDom!: ElTable;
- // 表格数据
- @Prop({ default: Array }) tableData?: [];
- // 表头数据
- @Prop({ default: Object }) headersStage?: {};
- // 当前页头文字
- @Prop({ default: "" }) currentHeader?: string;
- @Emit('handleCurrentEdit')
- handleEdit(index, row) {
- return row
- }
- created() {
- }
- @Watch("headersStage", { immediate: true, deep: true })
- onCurrentHeaderChange() {
- this.$nextTick(() => {
- if (this.tableDom?.doLayout)
- this.tableDom.doLayout();
- });
- }
- }
- </script>
- <style lang="scss">
- .adm-multi-table {
- .el-table__row {
- td {
- padding: 0;
- }
- }
- }
- .center {
- display: flex;
- justify-content: center;
- align-content: center;
- margin-top: 200px;
- }
- </style>
|