动态列组件 2022年8月23日 sxm

src/views/demo/null.vue

@@ -27,7 +27,7 @@
         :header-align="item.headerAlign"
         :show-overflow-tooltip="item.showOverflowTooltip"
         :align="item.align"
-        :fixed="item.fixed"
+        :fixed="item.fixed==''?false:item.fixed"
         min-width="20%"
         :label="item.columnLabel">
         <template slot-scope="scope">

src/views/modules/common/column.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" title="设置table列"
+  <el-dialog :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" title="设置表格列"
              :visible.sync="visible"
-             width="1200px" v-drag>
+             width="852px" v-drag>
     <el-form label-position="top"  @keyup.enter.native="updateColumnList()"
              v-model="userColumnList"
              inline="inline"
@@ -12,7 +12,7 @@
                     :label="item.columnLabel"
                     :prop="item.columnProp">
         <el-form-item label="排序">
-          <el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="item.sortLv"  :min="0" ></el-input>
+          <el-input style="width: 100px" oninput="value=value.replace(/[^\d]/g, '')" v-model="item.sortLv"  :min="0" ></el-input>
 <!--          <el-input-number v-model="item.sortLv" controls-position="right" size="mini" :min="0"-->
 <!--                           :max="100"></el-input-number>-->
         </el-form-item>
@@ -30,27 +30,28 @@
             inactive-text="不排序">
           </el-switch>
         </el-form-item>
-        <el-form-item label="固定状态">
-          <el-switch
-            v-model="item.fixed"
-            active-text="固定"
-            inactive-text="不固定">
-          </el-switch>
+        <el-form-item label="固定位置">
+          <el-select style="width: 100px"  v-model="item.fixed">
+            <el-option label="不固定" value=""></el-option>
+            <el-option label="左固定" value="left"></el-option>
+            <el-option label="右固定" value="right"></el-option>
+          </el-select>
+
         </el-form-item>
         <el-form-item label="宽度">
-          <el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="item.columnWidth"  :min="0" ></el-input>
+          <el-input style="width: 100px" oninput="value=value.replace(/[^\d]/g, '')" v-model="item.columnWidth"  :min="0" ></el-input>
 <!--          <el-input-number v-model="item.columnWidth" controls-position="right" size="mini" :min="0"-->
 <!--                           :max="1000"></el-input-number>-->
         </el-form-item>
         <el-form-item label="类型">
-          <el-select v-model="item.columnType" >
-            <el-option value="string" label="string"></el-option>
-            <el-option value="number" label="number"></el-option>
-            <el-option value="date" label="date"></el-option>
+          <el-select style="width: 100px" v-model="item.columnType" >
+            <el-option value="string" label="字符"></el-option>
+            <el-option value="number" label="数字"></el-option>
+            <el-option value="date" label="日期"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="位置">
-          <el-select v-model="item.align" >
+          <el-select style="width: 100px" v-model="item.align" >
             <el-option value="left" label="居左"></el-option>
             <el-option value="center" label="居中"></el-option>
             <el-option value="right" label="居右"></el-option>
@@ -150,7 +151,34 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style >
+
+   .el-switch__label * {
+    font-size: 12px;
+  }
+   .el-switch {
+
+     font-size: 12px;
+     line-height: 15px;
+     height: 15px;
+   }
 
+   .el-switch__core {
+     margin: 0;
+     position: relative;
+     width: 30px;
+     height: 18px;
+      border: 0px solid #dcdfe6;
+     outline: 0;
+     border-radius: 10px;
+     -webkit-box-sizing: border-box;
+   }
+   .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
+     margin-bottom: 0px;
+   }
 
+   .el-select-dropdown__item {
+     height: 28px;
+     line-height: 28px;
+   }
 </style>