表格示例完成

Former-commit-id: cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly fcef20ff04bd08ab432bc47ac75fb4e6483c2851 [formerly fa46aa095a6a2e8317207d6ab9862cc7f4b56339]]]]]
Former-commit-id: 12745f3af51dabcf235c449e6f8b47ea0658b4c2
Former-commit-id: 020118a1c207454660f1e83e35dd834ac9493b74
Former-commit-id: d205e48a791b6afe1222c08943206ee238e92de8 [formerly dc747e67590f1042a5ac7b01ee86d4a9509cd920]
Former-commit-id: 867a148b7da027dc469ef8e1964f593e6abfe86b
Former-commit-id: d348819675978bf97305d79863fd72de108adad3
Former-commit-id: 8c8bcd05152b184547b8903de19a63ef262ed12c
Former-commit-id: 375bf4f1cbce6b86e82e86bedf7951d0d800f97f
Former-commit-id: 4b70e86cd638b19ed13371c86fa4b7be17528ae7

src/mock/demo/business/table/1/index.js

@@ -8,7 +8,7 @@ Mock.mock('/api/demo/business/table/1', ({ body }) => {
   return Mock.mock(
     {
       page,
-      'list|30': [{
+      'list|20': [{
         'key': '@guid',
         'value|1': [10, 100, 200, 500],
         'type': '@boolean',

src/pages/demo/business/table/1/componnets/PageHeader/index.vue

@@ -6,17 +6,17 @@
     ref="form"
     size="mini"
     style="margin-bottom: -18px;">
-    
+
     <el-form-item label="状态" prop="type">
       <el-select
         v-model="form.type"
         placeholder="状态选择"
         style="width: 100px;">
-        <el-option label="状态 1" value="1"></el-option>
-        <el-option label="状态 2" value="2"></el-option>
-        <el-option label="状态 3" value="3"></el-option>
-        <el-option label="状态 4" value="4"></el-option>
-        <el-option label="状态 5" value="5"></el-option>
+        <el-option label="状态 1" value="1"/>
+        <el-option label="状态 2" value="2"/>
+        <el-option label="状态 3" value="3"/>
+        <el-option label="状态 4" value="4"/>
+        <el-option label="状态 5" value="5"/>
       </el-select>
     </el-form-item>
 
@@ -24,7 +24,7 @@
       <el-input
         v-model="form.user"
         placeholder="用户"
-        style="width: 80px;"/>
+        style="width: 100px;"/>
     </el-form-item>
 
     <el-form-item label="卡密" prop="key">
@@ -44,7 +44,7 @@
     <el-form-item>
       <el-button
         type="primary"
-        @click="submitForm">
+        @click="handleFormSubmit">
         <d2-icon name="search"/>
         查询
       </el-button>
@@ -52,7 +52,7 @@
 
     <el-form-item>
       <el-button
-        @click="resetForm">
+        @click="handleFormReset">
         <d2-icon name="refresh"/>
         重置
       </el-button>
@@ -78,7 +78,7 @@ export default {
     }
   },
   methods: {
-    submitForm () {
+    handleFormSubmit () {
       this.$refs.form.validate((valid) => {
         if (valid) {
           this.$emit('submit', this.form)
@@ -91,7 +91,7 @@ export default {
         }
       })
     },
-    resetForm () {
+    handleFormReset () {
       this.$refs.form.resetFields()
     }
   }

src/pages/demo/business/table/1/componnets/PageMain/index.vue

@@ -1,99 +1,149 @@
 <template>
-  <el-table
-    :data="currentTableData"
-    size="mini"
-    stripe
-    style="width: 100%">
+  <div>
+    <el-form
+      :inline="true"
+      size="mini">
+      <el-form-item :label="`已选数据下载 [ ${currentTableData.length} ]`">
+        <el-button-group>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="currentTableData.length === 0"
+            @click="handleDownloadXlsx(currentTableData)">
+            xlsx
+          </el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="currentTableData.length === 0"
+            @click="handleDownloadCsv(currentTableData)">
+            csv
+          </el-button>
+        </el-button-group>
+      </el-form-item>
+      <el-form-item :label="`已选数据下载 [ ${multipleSelection.length} ]`">
+        <el-button-group>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="multipleSelection.length === 0"
+            @click="handleDownloadXlsx(multipleSelection)">
+            xlsx
+          </el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="multipleSelection.length === 0"
+            @click="handleDownloadCsv(multipleSelection)">
+            csv
+          </el-button>
+        </el-button-group>
+      </el-form-item>
+    </el-form>
 
-    <el-table-column label="卡密" :show-overflow-tooltip="true">
-      <template slot-scope="scope">
-        {{scope.row.key}}
-      </template>
-    </el-table-column>
+    <el-table
+      :data="currentTableData"
+      v-loading="loading"
+      size="mini"
+      stripe
+      style="width: 100%;"
+      @selection-change="handleSelectionChange">
 
-    <el-table-column label="面值" width="60" align="center">
-      <template slot-scope="scope">
-        <el-tag
-          size="mini"
-          type="success">
-          {{scope.row.value}}
-        </el-tag>
-      </template>
-    </el-table-column>
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
 
-    <el-table-column label="状态" width="50" align="center">
-      <template slot-scope="scope">
-        <boolean-control
-          :value="scope.row.type"
-          @change="(val) => {
-            handleSwitchChange(val, scope.$index)
-          }">
-          <d2-icon
-            name="check-circle"
-            style="font-size: 20px; line-height: 32px; color: #67C23A;"
-            slot="active"/>
-          <d2-icon
-            name="times-circle"
-            style="font-size: 20px; line-height: 32px; color: #F56C6C;"
-            slot="inactive"/>
-        </boolean-control>
-      </template>
-    </el-table-column>
+      <el-table-column label="卡密" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.key}}
+        </template>
+      </el-table-column>
 
-    <el-table-column label="状态" width="50" align="center">
-      <template slot-scope="scope">
-        <boolean-control-mini
-          :value="scope.row.type"
-          @change="(val) => {
-            handleSwitchChange(val, scope.$index)
-          }">
-          <d2-icon
-            name="check-circle"
-            style="font-size: 20px; line-height: 32px; color: #67C23A;"
-            slot="active"/>
-          <d2-icon
-            name="times-circle"
-            style="font-size: 20px; line-height: 32px; color: #F56C6C;"
-            slot="inactive"/>
-        </boolean-control-mini>
-      </template>
-    </el-table-column>
+      <el-table-column label="面值" width="60" align="center">
+        <template slot-scope="scope">
+          <el-tag
+            size="mini"
+            type="success">
+            {{scope.row.value}}
+          </el-tag>
+        </template>
+      </el-table-column>
 
-    <el-table-column label="管理员" width="60">
-      <template slot-scope="scope">
-        {{scope.row.admin}}
-      </template>
-    </el-table-column>
+      <el-table-column label="状态" width="50" align="center">
+        <template slot-scope="scope">
+          <boolean-control
+            :value="scope.row.type"
+            @change="(val) => {
+              handleSwitchChange(val, scope.$index)
+            }">
+            <d2-icon
+              name="check-circle"
+              style="font-size: 20px; line-height: 32px; color: #67C23A;"
+              slot="active"/>
+            <d2-icon
+              name="times-circle"
+              style="font-size: 20px; line-height: 32px; color: #F56C6C;"
+              slot="inactive"/>
+          </boolean-control>
+        </template>
+      </el-table-column>
 
-    <el-table-column label="管理员备注" :show-overflow-tooltip="true">
-      <template slot-scope="scope">
-        {{scope.row.adminNote}}
-      </template>
-    </el-table-column>
+      <el-table-column label="状态" width="50" align="center">
+        <template slot-scope="scope">
+          <boolean-control-mini
+            :value="scope.row.type"
+            @change="(val) => {
+              handleSwitchChange(val, scope.$index)
+            }">
+            <d2-icon
+              name="check-circle"
+              style="font-size: 20px; line-height: 32px; color: #67C23A;"
+              slot="active"/>
+            <d2-icon
+              name="times-circle"
+              style="font-size: 20px; line-height: 32px; color: #F56C6C;"
+              slot="inactive"/>
+          </boolean-control-mini>
+        </template>
+      </el-table-column>
 
-    <el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
-      <template slot-scope="scope">
-        {{scope.row.dateTimeCreat}}
-      </template>
-    </el-table-column>
+      <el-table-column label="管理员" width="60">
+        <template slot-scope="scope">
+          {{scope.row.admin}}
+        </template>
+      </el-table-column>
 
-    <el-table-column label="使用状态" width="100" align="center">
-      <template slot-scope="scope">
-        <el-tag
-          size="mini"
-          :type="scope.row.used ? 'info' : ''">
-          {{scope.row.used ? '已使用' : '未使用'}}
-        </el-tag>
-      </template>
-    </el-table-column>
+      <el-table-column label="管理员备注" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.adminNote}}
+        </template>
+      </el-table-column>
 
-    <el-table-column label="使用时间" width="150" :show-overflow-tooltip="true">
-      <template slot-scope="scope">
-        {{scope.row.dateTimeUse}}
-      </template>
-    </el-table-column>
+      <el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.dateTimeCreat}}
+        </template>
+      </el-table-column>
 
-  </el-table>
+      <el-table-column label="使用状态" width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag
+            size="mini"
+            :type="scope.row.used ? 'info' : ''">
+            {{scope.row.used ? '已使用' : '未使用'}}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="使用时间" width="150" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.dateTimeUse}}
+        </template>
+      </el-table-column>
+
+    </el-table>
+  </div>
 </template>
 
 <script>
@@ -107,11 +157,15 @@ export default {
   props: {
     tableData: {
       default: () => []
+    },
+    loading: {
+      default: false
     }
   },
   data () {
     return {
-      currentTableData: []
+      currentTableData: [],
+      multipleSelection: []
     }
   },
   watch: {
@@ -130,8 +184,34 @@ export default {
         type: val
       })
       // 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
+    },
+    handleSelectionChange (val) {
+      this.multipleSelection = val
+    },
+    handleDownloadXlsx (data) {
+      const columns = [
+        { label: '卡密', prop: 'key' }
+      ]
+      this.$export.excel({
+        columns,
+        data
+      })
+        .then(() => {
+          this.$message('导出表格成功')
+        })
+    },
+    handleDownloadCsv (data) {
+      const columns = [
+        { label: '卡密', prop: 'key' }
+      ]
+      this.$export.csv({
+        columns,
+        data
+      })
+        .then(() => {
+          this.$message('导出CSV成功')
+        })
     }
   }
 }
 </script>
-

src/pages/demo/business/table/1/index.vue

@@ -5,7 +5,8 @@
       @submit="handleSubmit"
       ref="header"/>
     <demo-page-main
-      :table-data="table"/>
+      :table-data="table"
+      :loading="loading"/>
     <demo-page-footer
       slot="footer"
       :current="page.current"
@@ -27,6 +28,7 @@ export default {
   data () {
     return {
       table: [],
+      loading: false,
       page: {
         current: 1,
         size: 100,
@@ -41,29 +43,32 @@ export default {
         message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
       })
       this.page = val
+      // nextTick 只是为了优化示例中 notify 的显示
       this.$nextTick(() => {
-        this.$refs.header.submitForm()
+        this.$refs.header.handleFormSubmit()
       })
     },
     handleSubmit (form) {
+      this.loading = true
       this.$notify({
-        title: '开始请求表格数据'
+        title: '开始请求模拟表格数据'
       })
       this.$axios.post('/api/demo/business/table/1', {
         ...form,
         page: this.page
       })
         .then(res => {
-          console.log('res', res)
+          this.loading = false
           this.$notify({
-            title: '表格数据请求完毕'
+            title: '模拟表格数据请求完毕'
           })
           this.table = res.list
           this.page = res.page
         })
         .catch(err => {
+          this.loading = false
           this.$notify({
-            title: '表格数据请求异常'
+            title: '模拟表格数据请求异常'
           })
           console.log('err', err)
         })

src/pages/demo/playground/env/index.vue

@@ -18,4 +18,3 @@ export default {
   }
 }
 </script>
-

src/pages/error-page-404/page.vue

@@ -10,7 +10,7 @@
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
 .page-404 {
-  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
+  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
   background-blend-mode: multiply,multiply;
   height: 100%;
   display: flex;