123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- <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"
- :formatter="formatContent"
- 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?: any;
- // 当前页头文字
- @Prop({ default: "" }) currentHeader?: string;
- @Emit("handleCurrentEdit")
- handleEdit(index: number, row: any) {
- return row;
- }
- get haderInfoMap() {
- if (this.headersStage?.dictStages?.data?.length) {
- const haderInfoMap: any = {};
- this.headersStage.dictStages.data.forEach((item: any) => {
- haderInfoMap[item.path] = item;
- });
- console.log(haderInfoMap);
- return haderInfoMap;
- } else {
- return {};
- }
- }
- /**
- * 表格特殊内容格式化处理
- */
- private formatContent(row: any, column: any, cellValue: any) {
- const info = this.haderInfoMap[column.property];
- if (info && cellValue) { //有值且获取到表头信息
- const dataSource = info?.dataSource ? info.dataSource : [];
- if (info.dataType === "ENUM" || info.dataType === "BOOLEAN") { //内容为单选枚举和布尔类型
- const text = dataSource.find((item: any) => {
- return item.code === cellValue;
- })?.name;
- return text;
- } else if (info.dataType === "MENUM" && cellValue instanceof Array && cellValue.length) { //内容为多选枚举且值为数组
- const textList = dataSource.map((item: any) => {
- if (
- cellValue.find((value: string) => {
- return item?.code === value;
- })
- ) {
- return item?.name;
- }
- }).filter((item: any) => item).join(",");
- return textList;
- } else {
- return cellValue;
- }
- }
- return cellValue;
- }
- @Watch("headersStage", { immediate: true, deep: true })
- onCurrentHeaderChange() {
- this.$nextTick(() => {
- if (this.tableDom?.doLayout) this.tableDom.doLayout();
- });
- }
- @Watch("tableData", { immediate: true, deep: true })
- handleTableData(o: any, n: any) {
- this.$nextTick(() => {
- console.log(o, n);
- // this.tableData = this.tableData
- });
- }
- }
- </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>
|