表格样式修改

src/components/TableModel2/index.vue

@@ -3,50 +3,18 @@
     <div>
         <!-- 表单搜索 -->
         <el-card v-show="showSearch" class="search-card">
-            <el-form
+            <el-form :inline="true" ref="queryFormRef" :rules="formRules" :model="queryParams" label-width="auto">
-                :inline="true"
+                <el-form-item :key="v" :prop="item.f_model" v-for="(item, v) in formLabel"
-                ref="queryFormRef"
+                    :label="item.isShow ? item.f_label : ''">
-                :rules="formRules"
+                    <el-input clearable :maxlength="item.f_max || 50" v-if="item.f_type === 'ipt'"
-                :model="queryParams"
+                        v-model.trim="queryParams[item.f_model]" :placeholder="`请输入${item.f_label}`"
-                label-width="auto"
+                        :style="{ width: item.f_width || '180px' }" />
-            >
+                    <el-select clearable filterable v-if="item.f_type === 'sel'" v-model="queryParams[item.f_model]"
-                <el-form-item
+                        :placeholder="`请选择${item.f_label}`" :style="{ width: item.f_width || '180px' }">
-                    :key="v"
+                        <el-option :key="v" :label="sel.label" :value="sel.value" v-for="(sel, v) in item.f_selList" />
-                    :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
+                    <el-cascader clearable style="width: 180px" :show-all-levels="false" :props="item.optionProps"
-                        clearable
+                        :options="item.f_selList" v-if="item.f_type === 'selCasAdd'" v-model="queryParams[item.f_model]"
-                        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"
-                    <el-cascader
+                        :props="item.optionProps" v-if="item.f_type === 'selCas'" v-model="queryParams[item.f_model]"
-                        style="width: 180px"
+                        @change="handleCas($event, item.f_model)" />
-                        :show-all-levels="false"
+                    <el-date-picker type="date" style="width: 240px" value-format="yyyy-MM-dd"
-                        :options="item.f_selList"
+                        v-if="item.f_type === 'date'" v-model="queryParams[item.f_model]"
-                        :props="item.optionProps"
+                        :placeholder="`请选择${item.f_label}`" />
-                        v-if="item.f_type === 'selCas'"
+                    <el-date-picker type="daterange" style="width: 240px" range-separator="至" value-format="yyyy-MM-dd"
-                        v-model="queryParams[item.f_model]"
+                        start-placeholder="开始日期" end-placeholder="结束日期" v-if="item.f_type === 'dateRange'"
-                        @change="handleCas($event, item.f_model)"
+                        v-model="queryParams[item.f_model]" @change="onChangeTime($event, item.dateType)"
-                    />
+                        :picker-options="pickerOptions" />
-                    <el-date-picker
+                    <el-input-number :min="0" style="width: 240px" v-if="item.f_type === 'num'"
-                        type="date"
+                        v-model="queryParams[item.f_model]" />
-                        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
+                    <el-button v-if="showQueryButtons" class="query-btn" @click="handleQuery">
-                        v-if="showQueryButtons"
-                        class="query-btn"
-                        @click="handleQuery"
-                    >
                         查询
                     </el-button>
-                    <el-button
+                    <el-button v-if="showQueryButtons" class="reset-btn" @click="resetQuery">
-                        v-if="showQueryButtons"
-                        class="reset-btn"
-                        @click="resetQuery"
-                    >
                         重置
                     </el-button>
 
@@ -116,26 +52,15 @@
         </el-card>
         <!-- 按钮集群 -->
         <el-row class="btn-container">
-            <ToolbarModel
+            <ToolbarModel v-if="showRightTools" :columns="columnCheckList" @queryTable="getTableList"
-                v-if="showRightTools"
+                :showSearch.sync="showSearch" :handleShow.sync="handleShow" :indexNumShow.sync="indexNumShow"
-                :columns="columnCheckList"
+                :selectionShow.sync="selectionShow" :isSelectShow="isSelectShow" :showOperation="showOperation" />
-                @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
+            <div class="table-header" v-if="$slots.tableTitle || $slots.tableActions">
-                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
+                <el-table ref="tableRef" :data="tableList" style="width: 100%" :max-height="tableMaxHeight"
-                    ref="tableRef"
+                    v-loading="loading" select-on-indeterminate @selection-change="handleSelectionChange"
-                    :data="tableList"
+                    @current-change="handleCurrentChange" highlight-current-row>
-                    style="width: 100%"
+                    <el-table-column width="45" align="center" type="selection" :selectable="selectable"
-                    v-loading="loading"
+                        v-if="selectionShow && isSelectShow" />
-                    select-on-indeterminate
+                    <el-table-column width="45" align="center" label="" v-if="isRadioShow">
-                    @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
+                            <el-radio :label="getRowUniqueId(scope.row)" v-model="currentRowId">
-                                :label="getRowUniqueId(scope.row)"
-                                v-model="currentRowId"
-                            >
                                 <span></span>
                             </el-radio>
                         </template>
                     </el-table-column>
-                    <el-table-column
+                    <el-table-column fixed width="55" label="序号" type="index" align="center" :index="(index) =>
-                        fixed
+                            (queryParams.pageNum - 1) *
-                        width="55"
+                            queryParams.pageSize +
-                        label="序号"
+                            index +
-                        type="index"
+                            1
-                        align="center"
+                        " v-if="indexNumShow" />
-                        :index="
+                    <el-table-column :key="v" align="center" :label="item.t_label" :prop="item.t_props"
-                            (index) =>
+                        :width="item.t_width" show-overflow-tooltip v-for="(item, v) in tableColumCheckProps">
-                                (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
+                                <slot :data="scope.row" :name="item.t_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
+                    <el-table-column align="center" label="操作" :width="handleColWidth" :show-overflow-tooltip="false"
-                        align="center"
+                        fixed="right" v-if="handleShow && showOperation">
-                        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
+            <pagination :total="total" @pagination="getTableList" :page.sync="queryParams.pageNum"
-                :total="total"
+                :limit.sync="queryParams.pageSize" />
-                @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 - ${
+            const availableHeight = `calc(100vh - ${baseHeight + toolbarHeight + paginationHeight + 25
-                baseHeight + toolbarHeight + paginationHeight + 25
+                }px)`
-            }px)`
             return {
                 height: availableHeight,
                 display: 'flex',
@@ -377,12 +252,7 @@ export default {
         },
         /* 表格容器样式 */
         tableContainerStyle() {
-            return {
+            return {}
-                flex: 1,
-                overflow: 'hidden',
-                display: 'flex',
-                flexDirection: 'column',
-            }
         },
     },
     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;
+        width: 100%;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        min-height: 0; // 确保容器可以收缩
 
         ::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>