maojiacai/ba_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
Esacpe
2025-09-26 16:08:38 +08:00
parent 5208ce4fde
commit 39177fbd7d
10 changed files with 220 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/aboutTable/MyTable.vue
View File

@ -1,17 +1,24 @@
<template>
<div style="width: 100%">
<div style="width: 100%" :class="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''">
<!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
@current-change="handleCurrentChange" @row-click="singleElection" :row-key="getConfiger.rowKey"
:border="getConfiger.border" :default-expand-all="getConfiger.defaultExpandAll" :stripe="getConfiger.stripe"
:height="tableHeight" v-loading="tableConfiger.loading" :lazy="getConfiger.lazy" :load="load"
:tree-props="treePros" style="width: 100%" :header-cell-class-name="() => 'HeadBgColor'"
<el-table
ref="multipleTableRef"
:data="tableData"
@selection-change="handleSelectionChange"
:row-key="getConfiger.rowKey"
:border="getConfiger.border"
:default-expand-all="getConfiger.defaultExpandAll"
:stripe="getConfiger.stripe"
:height="tableHeight"
v-loading="tableConfiger.loading"
:lazy="getConfiger.lazy"
:load="load"
:tree-props="treePros"
style="width: 100%"
:header-cell-class-name="() => 'HeadBgColor'"
:highlight-current-row="getConfiger.showSelectType === 'radio'"
:row-style="{ height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px' }">
<el-table-column type="selection" width="55" v-if="getConfiger.showSelectType === 'checkBox'" />
<el-table-column width="55" v-else-if="getConfiger.showSelectType === 'radio'" #default="{ row }">
<el-radio class="radio" v-model="getConfiger.radioChoose" :label="row[getConfiger.rowKey]">&nbsp;</el-radio>
</el-table-column>
<el-table-column style="width: 55px" type="selection" width="55" v-if="getConfiger.showSelectType" :class="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''" />
<el-table-column type="index" label="序号" v-if="getConfiger.showIndex" width="60" :align="getConfiger?.align" />
<el-table-column v-for="(item, index) in tableColumn" :align="getConfiger?.align" :prop="item.prop" :key="index"
:label="item.label" :width="item.width" style="width: 100%; font-size: 14px"
@ -25,11 +32,12 @@
{{ row[item.prop] }}
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column v-if="getConfiger.haveControls" :fixed="fixed" :label="getConfiger.controls"
:width="controlsWidth" :align="getConfiger?.align">
<template #default="scope">
<slot name="controls" v-bind="scope" :index="scope.$index"></slot>
<slot name="controls" v-bind="scope"></slot>
</template>
</el-table-column>
</el-table>
@ -58,7 +66,7 @@ const props = defineProps({
default: 180
},
tableHeight: {
type: Number
type: Number || String
},
treePros: {
type: Object,
@ -95,8 +103,6 @@ let getConfiger = reactive({
});
watchEffect(() => {
getConfiger = { ...getConfiger, ...props.tableConfiger };
console.log(getConfiger,'getConfiger');
setDefaultChoose();
});
onMounted(() => {
@ -104,19 +110,16 @@ onMounted(() => {
});
// 可选的时候选择的数据
const handleSelectionChange = (val) => {
emit("chooseData", val);
};
// 单选的时候选择的数据
const handleCurrentChange = (val) => {
currentRow.value = val;
emit("chooseData", val);
};
const singleElection = (val) => {
if (getConfiger.showSelectType === "radio") {
getConfiger.radioChoose = val[getConfiger.rowKey];
if (getConfiger.showSelectType === 'radio' && val.length > 1) {
let del_row = val.shift();
multipleTableRef.value.toggleRowSelection(del_row, false);
currentRow.value = val;
emit("chooseData", val);
} else {
emit("chooseData", val);
}
};
// 懒加载数据的方法
const load = (date, treeNode, resolve) => {
setTimeout(() => {
@ -140,29 +143,27 @@ const load = (date, treeNode, resolve) => {
function setDefaultChoose() {
nextTick(() => {
// 多选的默认选中
if (
props.tableConfiger.defaultSelectKeys?.length > 0 &&
props.tableConfiger.showSelectType === "checkBox"
) {
if (props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "checkBox") {
props.tableData.forEach((item) => {
if (
props.tableConfiger.defaultSelectKeys.findIndex(
(v) => v === item[props.tableConfiger.rowKey]
) > -1
) {
if (props.tableConfiger.defaultSelectKeys.findIndex((v) => v === item[props.tableConfiger.rowKey]) > -1) {
multipleTableRef.value.toggleRowSelection(item, true);
}
});
// 单选的默认选中
} else if (
props.tableConfiger.defaultSelectKeys &&
props.tableConfiger.defaultSelectKeys?.length > 0 &&
props.tableConfiger.showSelectType === "radio"
) {
} else if (props.tableConfiger.defaultSelectKeys && props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "radio") {
getConfiger.radioChoose = props.tableConfiger.defaultSelectKeys[0];
}
});
}
</script>
<style lang="scss">
<style lang="scss"></style>
<style>
.tabBoxRadio .el-checkbox__inner {
border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
display: none;
}
</style>