|
@@ -1,39 +1,24 @@
|
|
<template>
|
|
<template>
|
|
- <div style="height: 100%;">
|
|
|
|
|
|
+ <div style="height: 100%">
|
|
<el-table
|
|
<el-table
|
|
:data="tableData"
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
style="width: 100%"
|
|
height="100%"
|
|
height="100%"
|
|
|
|
+ ref="tableDom"
|
|
class="adm-multi-table"
|
|
class="adm-multi-table"
|
|
:row-style="{ height: '10px' }"
|
|
:row-style="{ height: '10px' }"
|
|
border
|
|
border
|
|
- v-if="tableData.length > 0"
|
|
|
|
|
|
+ v-if="tableData.length > 0"
|
|
>
|
|
>
|
|
- <el-table-column
|
|
|
|
- prop="date"
|
|
|
|
- label="编辑"
|
|
|
|
- width="80"
|
|
|
|
- align="center"
|
|
|
|
- fixed
|
|
|
|
-
|
|
|
|
- >
|
|
|
|
|
|
+ <el-table-column prop="date" label="编辑" width="80" align="center" fixed>
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <span
|
|
|
|
- class="el-icon-edit el-input__icon"
|
|
|
|
- style="cursor: pointer"
|
|
|
|
- @click="handleEdit(scope.$index, scope.row)">
|
|
|
|
- </span>
|
|
|
|
|
|
+ <span class="el-icon-edit el-input__icon" style="cursor: pointer" @click="handleEdit(scope.$index, scope.row)"> </span>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column
|
|
|
|
- v-for="item in headersStage"
|
|
|
|
- :key="item.name"
|
|
|
|
- :label="item.name"
|
|
|
|
- align="center"
|
|
|
|
- >
|
|
|
|
|
|
+ <el-table-column v-for="item in headersStage" :key="item.name" :label="item.name" align="center">
|
|
<el-table-column
|
|
<el-table-column
|
|
- v-for="(child,index) in item.data"
|
|
|
|
- :min-width="child.path === 'outline'? 800: 110"
|
|
|
|
|
|
+ v-for="(child, index) in item.data"
|
|
|
|
+ :min-width="child.path === 'outline' ? 800 : 110"
|
|
:key="index"
|
|
:key="index"
|
|
:label="child.name"
|
|
:label="child.name"
|
|
:prop="child.path"
|
|
:prop="child.path"
|
|
@@ -42,29 +27,36 @@
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
- <div v-else class="center"> 暂无数据</div>
|
|
|
|
|
|
+ <div v-else class="center">暂无数据</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
-import { Component, Prop, Vue } from "vue-property-decorator";
|
|
|
|
|
|
+import { ElTable } from "element-ui/types/table";
|
|
|
|
+import { Component, Prop, Vue, Watch, Ref } from "vue-property-decorator";
|
|
@Component({
|
|
@Component({
|
|
- name: 'adm-multi-table'
|
|
|
|
|
|
+ name: "adm-multi-table",
|
|
})
|
|
})
|
|
export default class extends Vue {
|
|
export default class extends Vue {
|
|
|
|
+ @Ref("tableDom") readonly tableDom!: ElTable;
|
|
// 表格数据
|
|
// 表格数据
|
|
- @Prop({ default: Array }) tableData ?: []
|
|
|
|
|
|
+ @Prop({ default: Array }) tableData?: [];
|
|
// 表头数据
|
|
// 表头数据
|
|
- @Prop({ default: Object }) headersStage ?: {}
|
|
|
|
|
|
+ @Prop({ default: Object }) headersStage?: {};
|
|
// 当前页头文字
|
|
// 当前页头文字
|
|
- @Prop({ default: '' }) currentHeader ?: string
|
|
|
|
|
|
+ @Prop({ default: "" }) currentHeader?: string;
|
|
|
|
|
|
handleEdit(index, row) {
|
|
handleEdit(index, row) {
|
|
- console.log(index, row)
|
|
|
|
|
|
+ console.log(index, row);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ @Watch("headersStage", { immediate: true, deep: true })
|
|
|
|
+ onCurrentHeaderChange() {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.tableDom.doLayout();
|
|
|
|
+ });
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
@@ -74,8 +66,6 @@ export default class extends Vue {
|
|
padding: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
-
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.center {
|
|
.center {
|