优化Table组件样式

Signed-off-by: CenXinYi <2810162984@qq.com>

src/components/Table/BaseTable/index.vue

 <template>
   <div style="padding:5px 10px">
     <div class="mb12 font-small-bold">{{ allTableArguments.listName }}</div>
-    <div class="tableList">
-      <el-scrollbar>
-        <el-table
-          v-loading="allTableArguments.loading"
-          class="processList"
-          border
-          :data="allTableArguments.List"
-          style="width: 100%"
-          @selection-change="handleSelectionChange"
-        >
+    <!--  TODO:如果需要定长度的话可以使用这个在组件外部  <div class="tableList" style=" height: 600px;">-->
+    <el-scrollbar style="height: 100%;">
+      <el-table
+        v-loading="allTableArguments.loading"
+        class="processList"
+        border
+        :data="allTableArguments.List"
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
 
-          <el-table-column type="index" label="序号" width="50"/>
+        <el-table-column type="index" label="序号" width="50" />
 
-          <!-- TODO: 选择框是否开启，selectable控制是否单行禁用 -->
-          <el-table-column v-if="allTableArguments.columObj.selection" type="selection" :selectable="allTableArguments.columObj.selectable" width="50px" />
+        <!-- TODO: 选择框是否开启，selectable控制是否单行禁用 -->
+        <el-table-column v-if="allTableArguments.columObj.selection" type="selection" :selectable="allTableArguments.columObj.selectable" width="50px" />
 
-          <!-- TODO: 普通列 -->
-          <el-table-column
-            v-for="(column,columIndex) in allTableArguments.columObj.columnData"
-            :key="columIndex"
-            :prop="column.prop"
-            :label="column.label"
-            :width="column.width"
-            :fixed="column.fixed"
-            :align="column.align || 'center'"
-            :sortable="column.sortable"
-            :index="columIndex"
-            show-overflow-tooltip
-          >
-            <template  slot-scope="{row,$index}">
+        <!-- TODO: 普通列 -->
+        <el-table-column
+          v-for="(column,columIndex) in allTableArguments.columObj.columnData"
+          :key="columIndex"
+          :prop="column.prop"
+          :label="column.label"
+          :width="column.width"
+          :fixed="column.fixed"
+          :align="column.align || 'center'"
+          :sortable="column.sortable"
+          :index="columIndex"
+          show-overflow-tooltip
+        >
+          <template slot-scope="{row,$index}">
 
-              <!-- 默认展示 -->
-              <span v-if="column.text && column.editRow !== $index">{{ row[column.prop] || '-' }}</span>
-              <!-- 状态对象展示 -->
-              <span v-if="column.status && row[column.prop]">{{ row[column.prop].msg }}</span>
-              <!-- 自定义内容 -->
-              <span v-if="column.ownDefined">{{ column.ownDefinedReturn(row,$index) }}</span>
+            <!-- 默认展示 -->
+            <span v-if="column.text && column.editRow !== $index">{{ row[column.prop] || '-' }}</span>
+            <!-- 状态对象展示 -->
+            <span v-if="column.status && row[column.prop]">{{ row[column.prop].msg }}</span>
+            <!-- 自定义内容 -->
+            <span v-if="column.ownDefined">{{ column.ownDefinedReturn(row,$index) }}</span>
 
-              <!-- TODO: 时间数据   -->
-              <span v-if="column.time">{{ row[column.prop] | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
-              <!-- switch开关 -->
-              <el-switch v-if="column.switch" v-model="row[column.prop]" :inactive-text="row[column.prop] ? column.openText:column.closeText" @change="switchChange(row,$index,column.prop)" />
-              <!-- 图片展示 -->
-              <el-popover trigger="hover" placement="top" popper-class="popper">
-                <img v-if="column.image" :src="viewUrl + row[column.prop]" alt="">
-                <el-image v-if="column.image" slot="reference" :src="viewUrl + row[column.prop]" />
-              </el-popover>
+            <!-- TODO: 时间数据   -->
+            <span v-if="column.time">{{ row[column.prop] | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
+            <!-- switch开关 -->
+            <el-switch v-if="column.switch" v-model="row[column.prop]" :inactive-text="row[column.prop] ? column.openText:column.closeText" @change="switchChange(row,$index,column.prop)" />
+            <!-- 图片展示 -->
+            <el-popover trigger="hover" placement="top" popper-class="popper">
+              <img v-if="column.image" :src="viewUrl + row[column.prop]" alt="">
+              <el-image v-if="column.image" slot="reference" :src="viewUrl + row[column.prop]" />
+            </el-popover>
 
-              <!-- 图片数组 -->
-              <el-popover v-if="column.imageArr" trigger="hover" placement="top" popper-class="popper">
-                <img v-if="row[column.prop].length>0" :src="row[column.prop][0]" alt="">
-                <el-image v-if="row[column.prop].length >0" slot="reference" :src="row[column.prop][0]" :preview-src-list="row[column.prop]" />
-              </el-popover>
+            <!-- 图片数组 -->
+            <el-popover v-if="column.imageArr" trigger="hover" placement="top" popper-class="popper">
+              <img v-if="row[column.prop].length>0" :src="row[column.prop][0]" alt="">
+              <el-image v-if="row[column.prop].length >0" slot="reference" :src="row[column.prop][0]" :preview-src-list="row[column.prop]" />
+            </el-popover>
 
-              <!-- 可编辑input，仅在text默认展示类型才可编辑-->
-              <el-input v-if="column.editRow === $index" v-model="row[column.prop]" v-focus @blur="editInputBlur(row,$index,column.prop,columIndex)" />
-              <!-- 操作按钮 -->
-              <span v-if="column.isOperation" class="processListBtns">
-                <span v-for="(operations, index) in column.operation" :key="index">
-                  <el-button v-if=" operations.clickType === '1' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDetail(row,$index)">{{ operations.label }}</el-button>
-                  <el-button v-else-if=" operations.clickType === '2' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleUpdate(row,$index)">{{ operations.label }}</el-button>
-                  <el-button v-else-if=" operations.clickType === '3' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDelete(row,$index)">{{ operations.label }}</el-button>
-                </span>
+            <!-- 可编辑input，仅在text默认展示类型才可编辑-->
+            <el-input v-if="column.editRow === $index" v-model="row[column.prop]" v-focus @blur="editInputBlur(row,$index,column.prop,columIndex)" />
+            <!-- 操作按钮 -->
+            <span v-if="column.isOperation" class="processListBtns">
+              <span v-for="(operations, index) in column.operation" :key="index">
+                <el-button v-if=" operations.clickType === '1' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDetail(row,$index)">{{ operations.label }}</el-button>
+                <el-button v-else-if=" operations.clickType === '2' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleUpdate(row,$index)">{{ operations.label }}</el-button>
+                <el-button v-else-if=" operations.clickType === '3' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDelete(row,$index)">{{ operations.label }}</el-button>
               </span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-scrollbar>
-      <div />
-    </div>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-scrollbar>
+    <div />
+    <!--    </div>-->
   </div>
 </template>