You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.7 KiB
Vue
105 lines
2.7 KiB
Vue
<template>
|
|
<div class="content">
|
|
<el-table ref="dataTableRef" :data="tableData" stripe class="data-table"
|
|
@selection-change="handleSelectionChange" @row-click="handleRowClick" row-key="MapID">
|
|
<!-- 动态渲染表头 -->
|
|
<el-table-column type="selection" width="40px"></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 = 9;
|
|
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.Result.tableData;
|
|
// if (mapIds.includes(id)) {
|
|
// v_data.forEach((ele) => {
|
|
// ele.查看 = "查看";
|
|
// });
|
|
// }
|
|
tableData.value = v_data;
|
|
|
|
dataTotal.value = data.tableData.Result.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> |