You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.0 KiB
108 lines
3.0 KiB
2 years ago
|
<template>
|
||
|
|
<div class="my-table">
|
||
|
|
<el-table :data="page ? data.data : data"
|
||
|
|
:height="height ? height : (page ? state.sizes.pTableHei : state.sizes.tableHei)" highlight-current-row>
|
||
|
|
<el-table-column v-for="item in props" :key="item.code" :prop="item.code" :label="item.name"
|
||
|
|
:min-width="item.width" :width="item.type ? item.width : ''" :align="item.align ? item.align : 'center'"
|
||
|
|
show-overflow-tooltip :formatter="formatter">
|
||
|
|
<template v-if="item.slot" #default="scope">
|
||
|
|
<slot :name="item.code" :row="scope.row"></slot>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column v-if="prop.actionWidth" label="操作" :min-width="prop.actionWidth" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<slot v-bind:row="scope.row" v-bind:$index="scope.$index"></slot>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
<div v-if="page" class="my-pagination">
|
||
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="example.page"
|
||
|
|
:page-sizes="[10, 20, 50, 100, 200]" :page-size="example.size" layout="total, sizes, prev, pager, next, jumper"
|
||
|
|
:total="data.total">
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import { reactive, onMounted, ref, defineEmits, defineProps } from "vue";
|
||
|
|
|
||
|
|
const {
|
||
|
|
state: { dict },
|
||
|
|
} = useStore();
|
||
|
|
|
||
|
|
const prop = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
type: Array<any>(),
|
||
|
|
default: [],
|
||
|
|
},
|
||
|
|
page: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
actionWidth: {
|
||
|
|
type: Number,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: Number,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
example: {
|
||
|
|
type: Object,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const { state } = useStore();
|
||
|
|
|
||
|
|
const emit = defineEmits(["query"]);
|
||
|
|
|
||
|
|
const handleSizeChange = (val) => {
|
||
|
|
prop.example.size = val;
|
||
|
|
emit("query");
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCurrentChange = (val) => {
|
||
|
|
prop.example.page = val;
|
||
|
|
emit("query");
|
||
|
|
};
|
||
|
|
|
||
|
|
const getValue = (
|
||
|
|
row: any,
|
||
|
|
column: string,
|
||
|
|
value: any,
|
||
|
|
index?: number
|
||
|
|
) => {
|
||
|
|
if ((value == null || value == '') && value !== 0) {
|
||
|
|
return '--';
|
||
|
|
}
|
||
|
|
return value;
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatter = (row: any, column: any, value: any, index: number) => {
|
||
|
|
if (row.scheme)
|
||
|
|
return formatterByDist(row.scheme + '_' + column.property, value);
|
||
|
|
return getValue(null, '', value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatterByDist = (dictKey, value) => {
|
||
|
|
if (!dictKey) {
|
||
|
|
return getValue(null, '', value);
|
||
|
|
}
|
||
|
|
const mapping = dict[dictKey];
|
||
|
|
if (mapping == null) {
|
||
|
|
return getValue(null, '', value);
|
||
|
|
}
|
||
|
|
return mapping[value] == null ? value : mapping[value];
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => { });
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
//@import url(); 引入公共css类
|
||
|
|
</style>
|