kev/Drawer/drawer-htmlroot/components/GeologyParamImg.vue

<template>
    <div class="content">
        <el-table ref="dataTableRef" :data="tableData" stripe @selection-change="handleSelectionChange"
            @row-click="handleRowClick" class="data-table" row-key="MapID">
            <el-table-column type="selection" width="40"></el-table-column>
            <!-- 动态渲染表头 -->
            <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
                :width="column.width" :fixed="column.fixed">
            </el-table-column>
        </el-table>
        <el-pagination v-if="dataId" background layout="prev, pager, next" :total="dataTotal"
            @current-change="pageChange" :default-page-size="50"
            style="height: 30px;width: 100%;display: flex;justify-content: center;" />
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getColumns, getDatas } from '~/services/dataManageService';

const dataTableRef = ref(null);
const tableData = ref(null);
const columns = ref([]);
const dataId = 11;
const dataTotal = ref(0);
const searchKey = ref('');
const selectedRows = ref(null);

// const mapIds = [9, 10, 11, 12, 13, 15, 16, 18];

// const props = defineProps(['selectedRows']);
const emit = defineEmits(['selectedRows']);

const fetchColumns = async () => {
    const result = await getColumns(dataId);
    var cols = result.columns;
    cols.forEach((ele) => {
        if (ele.label == "序号") {
            ele.fixed = "left";
        }
        if (ele.label == "JH") {
            ele.fixed = "left";
        }
    });
    // if (mapIds.includes(id)) {
    //     cols.push({ prop: "查看", label: "操作" });
    // }
    columns.value = cols;
    await getData(1);
};


const getData = async (page) => {
    const ui = {
        name: searchKey.value,
        id: dataId,
        page: page,
    };
    const data = await getDatas(ui);
    var v_data = data.tableData.tableData;
    // if (mapIds.includes(id)) {
    //     v_data.forEach((ele) => {
    //         ele.查看 = "查看";
    //     });
    // }
    tableData.value = v_data;

    dataTotal.value = data.tableData.total;
};

const pageChange = async (page) => {
    await getData(page);
};

// 获取选中项
const handleSelectionChange = (selection) => {
    selectedRows.value = selection;
    emit('selectedRows', selectedRows.value);
}


// 行点击
const handleRowClick = async (item) => {
    dataTableRef.value.toggleRowSelection(item);
};

onMounted(async () => {
    await fetchColumns();
});

</script>
<style scoped>
.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.data-table {
    width: 100%;
    height: 350px;
    overflow-y: auto;
}
</style>