bonus
/
smart-bid-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

表格样式修改

This commit is contained in:
cwchen 2025-11-05 17:50:24 +08:00
parent 12a613d1c4
commit b3a97e3b5f
1 changed files with 61 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
src/components/TableModel2/index.vue
View File

@ -3,50 +3,18 @@
<div>
<!-- 表单搜索 -->
<el-card v-show="showSearch" class="search-card">
<el-form
:inline="true"
ref="queryFormRef"
:rules="formRules"
:model="queryParams"
label-width="auto"
>
<el-form-item
:key="v"
:prop="item.f_model"
v-for="(item, v) in formLabel"
:label="item.isShow ? item.f_label : ''"
>
<el-input
clearable
:maxlength="item.f_max || 50"
v-if="item.f_type === 'ipt'"
v-model.trim="queryParams[item.f_model]"
:placeholder="`请输入${item.f_label}`"
:style="{ width: item.f_width || '180px' }"
/>
<el-select
clearable
filterable
v-if="item.f_type === 'sel'"
v-model="queryParams[item.f_model]"
:placeholder="`请选择${item.f_label}`"
:style="{ width: item.f_width || '180px' }"
>
<el-option
:key="v"
:label="sel.label"
:value="sel.value"
v-for="(sel, v) in item.f_selList"
/>
<el-form :inline="true" ref="queryFormRef" :rules="formRules" :model="queryParams" label-width="auto">
<el-form-item :key="v" :prop="item.f_model" v-for="(item, v) in formLabel"
:label="item.isShow ? item.f_label : ''">
<el-input clearable :maxlength="item.f_max || 50" v-if="item.f_type === 'ipt'"
v-model.trim="queryParams[item.f_model]" :placeholder="`请输入${item.f_label}`"
:style="{ width: item.f_width || '180px' }" />
<el-select clearable filterable v-if="item.f_type === 'sel'" v-model="queryParams[item.f_model]"
:placeholder="`请选择${item.f_label}`" :style="{ width: item.f_width || '180px' }">
<el-option :key="v" :label="sel.label" :value="sel.value" v-for="(sel, v) in item.f_selList" />
</el-select>
<el-cascader
clearable
style="width: 180px"
:show-all-levels="false"
:props="item.optionProps"
:options="item.f_selList"
v-if="item.f_type === 'selCasAdd'"
v-model="queryParams[item.f_model]"
<el-cascader clearable style="width: 180px" :show-all-levels="false" :props="item.optionProps"
:options="item.f_selList" v-if="item.f_type === 'selCasAdd'" v-model="queryParams[item.f_model]"
@change="
handleCasAdd(
$event,
@ -54,59 +22,27 @@
cascadeFunc,
extraTableProp,
)
"
/>
<el-cascader
style="width: 180px"
:show-all-levels="false"
:options="item.f_selList"
:props="item.optionProps"
v-if="item.f_type === 'selCas'"
v-model="queryParams[item.f_model]"
@change="handleCas($event, item.f_model)"
/>
<el-date-picker
type="date"
style="width: 240px"
value-format="yyyy-MM-dd"
v-if="item.f_type === 'date'"
v-model="queryParams[item.f_model]"
:placeholder="`请选择${item.f_label}`"
/>
<el-date-picker
type="daterange"
style="width: 240px"
range-separator="至"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-if="item.f_type === 'dateRange'"
v-model="queryParams[item.f_model]"
@change="onChangeTime($event, item.dateType)"
:picker-options="pickerOptions"
/>
<el-input-number
:min="0"
style="width: 240px"
v-if="item.f_type === 'num'"
v-model="queryParams[item.f_model]"
/>
" />
<el-cascader style="width: 180px" :show-all-levels="false" :options="item.f_selList"
:props="item.optionProps" v-if="item.f_type === 'selCas'" v-model="queryParams[item.f_model]"
@change="handleCas($event, item.f_model)" />
<el-date-picker type="date" style="width: 240px" value-format="yyyy-MM-dd"
v-if="item.f_type === 'date'" v-model="queryParams[item.f_model]"
:placeholder="`请选择${item.f_label}`" />
<el-date-picker type="daterange" style="width: 240px" range-separator="至" value-format="yyyy-MM-dd"
start-placeholder="开始日期" end-placeholder="结束日期" v-if="item.f_type === 'dateRange'"
v-model="queryParams[item.f_model]" @change="onChangeTime($event, item.dateType)"
:picker-options="pickerOptions" />
<el-input-number :min="0" style="width: 240px" v-if="item.f_type === 'num'"
v-model="queryParams[item.f_model]" />
</el-form-item>
<!-- 自定义搜索插槽：父组件可自行插入 el-form-item -->
<slot name="form" :queryParams="queryParams"></slot>
<el-form-item v-if="showBtnCrews">
<el-button
v-if="showQueryButtons"
class="query-btn"
@click="handleQuery"
>
<el-button v-if="showQueryButtons" class="query-btn" @click="handleQuery">
查询
</el-button>
<el-button
v-if="showQueryButtons"
class="reset-btn"
@click="resetQuery"
>
<el-button v-if="showQueryButtons" class="reset-btn" @click="resetQuery">
重置
</el-button>
@ -116,26 +52,15 @@
</el-card>
<!-- 按钮集群 -->
<el-row class="btn-container">
<ToolbarModel
v-if="showRightTools"
:columns="columnCheckList"
@queryTable="getTableList"
:showSearch.sync="showSearch"
:handleShow.sync="handleShow"
:indexNumShow.sync="indexNumShow"
:selectionShow.sync="selectionShow"
:isSelectShow="isSelectShow"
:showOperation="showOperation"
/>
<ToolbarModel v-if="showRightTools" :columns="columnCheckList" @queryTable="getTableList"
:showSearch.sync="showSearch" :handleShow.sync="handleShow" :indexNumShow.sync="indexNumShow"
:selectionShow.sync="selectionShow" :isSelectShow="isSelectShow" :showOperation="showOperation" />
</el-row>
<!-- 表格 -->
<el-card class="table-card" :style="tableCardStyle">
<!-- 表格头部插槽 -->
<div
class="table-header"
v-if="$slots.tableTitle || $slots.tableActions"
>
<div class="table-header" v-if="$slots.tableTitle || $slots.tableActions">
<div class="table-title">
<slot name="tableTitle"></slot>
</div>
@ -146,83 +71,38 @@
<!-- 表格容器，添加最大高度和滚动 -->
<div class="table-container" :style="tableContainerStyle">
<el-table
ref="tableRef"
:data="tableList"
style="width: 100%"
v-loading="loading"
select-on-indeterminate
@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"
highlight-current-row
>
<el-table-column
width="45"
align="center"
type="selection"
:selectable="selectable"
v-if="selectionShow && isSelectShow"
/>
<el-table-column
width="45"
align="center"
label=""
v-if="isRadioShow"
>
<el-table ref="tableRef" :data="tableList" style="width: 100%" :max-height="tableMaxHeight"
v-loading="loading" select-on-indeterminate @selection-change="handleSelectionChange"
@current-change="handleCurrentChange" highlight-current-row>
<el-table-column width="45" align="center" type="selection" :selectable="selectable"
v-if="selectionShow && isSelectShow" />
<el-table-column width="45" align="center" label="" v-if="isRadioShow">
<template slot-scope="scope">
<el-radio
:label="getRowUniqueId(scope.row)"
v-model="currentRowId"
>
<el-radio :label="getRowUniqueId(scope.row)" v-model="currentRowId">
<span></span>
</el-radio>
</template>
</el-table-column>
<el-table-column
fixed
width="55"
label="序号"
type="index"
align="center"
:index="
(index) =>
(queryParams.pageNum - 1) *
queryParams.pageSize +
index +
1
"
v-if="indexNumShow"
/>
<el-table-column
:key="v"
align="center"
:label="item.t_label"
:prop="item.t_props"
:width="item.t_width"
show-overflow-tooltip
v-for="(item, v) in tableColumCheckProps"
>
<el-table-column fixed width="55" label="序号" type="index" align="center" :index="(index) =>
(queryParams.pageNum - 1) *
queryParams.pageSize +
index +
1
" v-if="indexNumShow" />
<el-table-column :key="v" align="center" :label="item.t_label" :prop="item.t_props"
:width="item.t_width" show-overflow-tooltip v-for="(item, v) in tableColumCheckProps">
<template slot-scope="scope">
<!-- 判断当前列数据是否需要使用插槽的数据 -->
<template v-if="item.t_slot">
<slot
:data="scope.row"
:name="item.t_slot"
></slot>
<slot :data="scope.row" :name="item.t_slot"></slot>
</template>
<template v-else>
{{ scope.row[item.t_props] || '-' }}
</template>
</template>
</el-table-column>
<el-table-column
align="center"
label="操作"
:width="handleColWidth"
:show-overflow-tooltip="false"
fixed="right"
v-if="handleShow && showOperation"
>
<el-table-column align="center" label="操作" :width="handleColWidth" :show-overflow-tooltip="false"
fixed="right" v-if="handleShow && showOperation">
<template slot-scope="{ row }">
<div class="optionDivRef">
<slot :data="row" name="handle">-</slot>
@ -233,12 +113,8 @@
</div>
<!-- 分页 -->
<pagination
:total="total"
@pagination="getTableList"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
<pagination :total="total" @pagination="getTableList" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" />
</el-card>
</div>
</template>
@ -256,7 +132,7 @@ export default {
// 列表请求接口
requestApi: {
type: Function,
default: () => function () {},
default: () => function () { },
},
// 列表配置项
columnsList: {
@ -366,9 +242,8 @@ export default {
const baseHeight = this.showSearch ? 200 : 120 // 搜索区域高度
const toolbarHeight = this.showRightTools ? 40 : 0 // 工具栏高度
const paginationHeight = 60 // 分页区域高度
const availableHeight = `calc(100vh - ${
baseHeight + toolbarHeight + paginationHeight + 25
}px)`
const availableHeight = `calc(100vh - ${baseHeight + toolbarHeight + paginationHeight + 25
}px)`
return {
height: availableHeight,
display: 'flex',
@ -377,12 +252,7 @@ export default {
},
/* 表格容器样式 */
tableContainerStyle() {
return {
flex: 1,
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
}
return {}
},
},
watch: {
@ -420,7 +290,7 @@ export default {
// 是否显示复选框
selectionShow: true,
// 是否显示序号
// 是否显示操作列
handleShow: true,
// 列表每列 label
@ -603,7 +473,7 @@ export default {
this.$set(setObj, 'unitName', res.data.unitName)
this.$set(setObj, 'typeName', res.data.name)
})
.catch((err) => {})
.catch((err) => { })
for (let key in this.queryParams) {
this.$set(setObj, key, this.queryParams[key])
}
@ -774,7 +644,6 @@ export default {
.table-card {
::v-deep .el-card__body {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
@ -801,24 +670,11 @@ export default {
// 新增表格容器样式
.table-container {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0; // 确保容器可以收缩
width: 100%;
::v-deep .el-table {
flex: 1;
height: 100%;
width: 100%;
margin-bottom: 0;
// 确保表格体可以滚动
.el-table__body-wrapper {
overflow-x: auto;
overflow-y: auto;
max-height: 100%;
}
}
}
@ -902,4 +758,8 @@ export default {
}
}
}
::v-deep .pagination-container {
margin-top: 0;
}
</style>