noob-components/packages/base/table/list-table.vue

<template>
    <div class="my-table">
        <el-table :size="state.size.size" :data="page ? data.data : data" @selection-change="selectionChange"
            :height="height ? height : (page ? state.sizes.pTableHei : state.sizes.tableHei)" highlight-current-row
            header-row-class-name="table-head" row-class-name="table-row">
            <el-table-column v-for="item in props" :key="item.code" :prop="item.code" :label="item.name" :type="item.type"
                :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>
    </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 } from "vue";

const { state } = useStore();
const prop = defineProps({
    data: {
        type: Object,
        default: null
    },
    props: {
        type: Array<any>(),
        default: [],
    },
    page: {
        type: Boolean,
        default: false,
    },
    height: {
        type: Number,
        default: null,
    },
    example: {
        type: Object,
        default: null,
    },
});


const emit = defineEmits(["query", "selection-change"]);

const selectionChange = selection => {
    emit("selection-change", selection);
};

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 = state.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类
.my-table ::v-deep .el-table__header .el-table__cell {
    background-color: v-bind('state.style.tableHeadBg') !important;
    border-bottom: 1px solid v-bind('state.style.tableBorderColor');
}

.my-table ::v-deep .el-table {
    background-color: v-bind('state.style.bodyBg') !important;
    color: v-bind('state.style.tableColor');
    border-bottom: 1px solid v-bind('state.style.tableBorderColor');
}

.my-table ::v-deep .el-table__body .el-table__cell {
    background-color: v-bind('state.style.tableBg') !important;
    border-bottom: 1px solid v-bind('state.style.tableBorderColor');
}
</style>