12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <template>
- <div>
- <el-table
- :data="tableData"
- style="width: 100%"
- max-height="550"
- 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.name"
- :prop="child.path"
- align="center"
- show-overflow-tooltip
- >
- </el-table-column>
- </el-table-column>
- </el-table>
- <div v-else class="center"> 暂无数据</div>
- </div>
- </template>
- <script lang="ts">
- import { Component, Prop, Vue } from "vue-property-decorator";
- @Component({
- name: 'adm-multi-table'
- })
- export default class extends Vue {
- // 表格数据
- @Prop({ default: Array }) tableData ?: []
- // 表头数据
- @Prop({ default: Object }) headersStage ?: {}
- // 当前页头文字
- @Prop({ default: '' }) currentHeader ?: string
- handleEdit(index, row) {
- console.log(index, row)
- }
- }
- </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>
|