fix: 导出样式

src/components/template/sel-export-column-list.vue

@@ -4,48 +4,61 @@
     :before-close="cancel"
     :append-to-body="true"
     :visible.sync="dialogVisible"
-    width="400px"
+    :width="dialogWidth + 'px'"
   >
-    <el-table
-      v-bind="{
-        height: '100%',
-        style: 'width: 100%',
-        border: true,
-        headerCellClassName: 'headerRowColor',
-        size: 'mini'
-      }"
-      :data="exportColumnList"
-    >
-      <el-table-column
-        v-bind="{
-          label: '显示',
-          prop: '',
-          width: '80px'
-        }"
-      >
-        <template slot="header" slot-scope="scope">
-          <div>
-            <el-checkbox v-model="isExport"></el-checkbox>
-            <span style="margin-left: 5px">导出</span>
+    <div v-if="mode == 'checkbox'">
+      <el-checkbox v-model="isExport">全选</el-checkbox>
+      <div style="margin: 15px 0"></div>
+      <el-row :gutter="20">
+        <el-col :span="6" v-for="(item, index) in exportColumnList" :key="index">
+          <div style="margin-bottom: 3px">
+            <el-checkbox v-model="item.isExport">{{ item.label }}</el-checkbox>
           </div>
-        </template>
-        <template slot-scope="scope">
-          <el-checkbox v-model="scope.row.isExport"></el-checkbox>
-        </template>
-      </el-table-column>
-      <el-table-column
+        </el-col>
+      </el-row>
+    </div>
+    <div v-if="mode == 'table'">
+      <el-table
+        :data="exportColumnList"
         v-bind="{
-          label: '列名',
-          prop: ''
+          height: '100%',
+          style: 'width: 100%',
+          border: true,
+          headerCellClassName: 'headerRowColor',
+          size: 'mini'
         }"
       >
-        <template slot-scope="scope">
-          <div>
-            {{ scope.row.label }}
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table-column
+          v-bind="{
+            label: '显示',
+            prop: '',
+            width: '80px'
+          }"
+        >
+          <template slot="header" slot-scope="scope">
+            <div>
+              <el-checkbox v-model="isExport"></el-checkbox>
+              <span style="margin-left: 5px">导出</span>
+            </div>
+          </template>
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.isExport"></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-bind="{
+            label: '列名',
+            prop: ''
+          }"
+        >
+          <template slot-scope="scope">
+            <div>
+              {{ scope.row.label }}
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
     <span slot="footer" class="dialog-footer">
       <el-button size="mini" @click="cancel">取 消</el-button>
       <el-button size="mini" type="primary" @click="determine">确 定</el-button>
@@ -59,6 +72,10 @@ export default {
     columnList: {
       type: Array,
       default: () => []
+    },
+    mode: {
+      type: String,
+      default: 'checkbox'
     }
   },
   data() {
@@ -68,12 +85,27 @@ export default {
       exportColumnList: []
     }
   },
+  computed: {
+    dialogWidth() {
+      var len = 0
+      this.exportColumnList.map(item => {
+        if ((item.label || '').length > len) {
+          len = (item.label || '').length
+        }
+      })
+      if (this.mode == 'checkbox') {
+        return 180 + len * 14 * 4
+      } else if (this.mode == 'table') {
+        return 140 + len * 14
+      }
+    }
+  },
   watch: {
     columnList: {
       handler() {
         if (this.columnList && this.columnList.length) {
           this.exportColumnList = this.columnList.map(item => {
-            return { ...item.exportField, isExport: !item.hidden }
+            return { ...item.exportField, isExport: true }
           })
           this.dialogVisible = true
         } else {