coding

src/views/haomo/components/tables/HmComplexTable.vue

@@ -50,23 +50,6 @@
           </el-date-picker>
         </span>
         <!-- end 过滤条件 -->
-
-      <!--预定义按钮-->
-      <el-button-group v-if="buttonGroup">
-        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
-        <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
-        <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" v-if="isShowNewButton" @click="openDialog('newData')">新建</el-button>
-        <el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" v-if="isShowRefresh" @click="refreshList">刷新</el-button>
-        <el-button class="filter-item" type="primary" v-waves icon="el-icon-close" v-if="multipleSelection.length" @click="BatchRemove">批量删除</el-button>
-      </el-button-group>
-      <span v-if="!buttonGroup">
-        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
-        <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
-        <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" v-if="isShowNewButton" @click="openDialog('newData')">新建</el-button>
-        <el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" v-if="isShowRefresh" @click="refreshList">刷新</el-button>
-        <el-button class="filter-item" type="primary" v-waves icon="el-icon-close" v-if="multipleSelection.length" @click="BatchRemove">批量删除</el-button>
-      </span>
-
         <!--自定义-->
         <span v-if="definedOperate.length" v-for="operate in definedOperate">
           <!--自定义按钮-->
@@ -100,7 +83,22 @@
           </el-form-item>
         </span>
 
+        <!--预定义按钮-->
+        <el-button-group v-if="buttonGroup">
+          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
+          <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
+          <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" v-if="isShowNewButton" @click="openDialog('newData')">新建</el-button>
+          <el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" v-if="isShowRefresh" @click="refreshList">刷新</el-button>
+          <el-button class="filter-item" type="primary" v-waves icon="el-icon-close" v-if="multipleSelection.length" @click="BatchRemove">批量删除</el-button>
+        </el-button-group>
 
+        <span v-if="!buttonGroup">
+          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
+          <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
+          <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" v-if="isShowNewButton" @click="openDialog('newData')">新建</el-button>
+          <el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" v-if="isShowRefresh" @click="refreshList">刷新</el-button>
+          <el-button class="filter-item" type="primary" v-waves icon="el-icon-close" v-if="multipleSelection.length" @click="BatchRemove">批量删除</el-button>
+        </span>
 
       </el-form>
     </div>
@@ -108,13 +106,13 @@
 
     <!-- 表格 -->
     <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
-              style="width: 100%" @selection-change="handleSelectionChange">
+              style="width: 100%" @selection-change="handleSelectionChange" @sort-change="sortChange">
       <el-table-column type="index" :index="indexMethod" label="序号" width="50px"></el-table-column>
-      <el-table-column type="selection" width="55">
-      </el-table-column>
-      <el-table-column v-for="(column,index) in showColumns" :key="index" align="center" :label="column.name">
+      <el-table-column type="selection" width="55" v-if="isShowSelection"></el-table-column>
+      <el-table-column v-for="(column,index) in showColumns" :key="index" align="center" :label="column.name" :prop="column.codeCamel" :sortable="column.isSort">
         <template slot-scope="scope">
           <span>{{ scope.row[column.codeCamel] }}</span>
+          <!--<el-checkbox v-model="listLoading"></el-checkbox>-->
         </template>
       </el-table-column>
       <el-table-column fixed="right" label="操作" :width="operationWidth" v-if="isShowEditDataButton || isShowDeleteButton">
@@ -321,7 +319,7 @@
        * 自定义表格选项，包括：definedParams、definedOperate、完整的示例为：
        *  {
        *    definedParams(params, operate){return params} // 自定义查询数据时的Params
-       *    definedOperate: [         // 自定义table顶部的操作，如果要根据多选框、输入框、时间选择器的值查询，需在自定义definedParams()方法中添加
+       *    definedOperate: [         // 自定义table顶部的操作，如果要根据下拉选择、输入框、时间选择器的值查询，需在自定义definedParams()方法中添加
        *      { type: 'select', label:'', placeholder: '', options:[{label: '', code: ''}], value:''}, // 自定义多选框
        *      { type: 'input', label:'', placeholder: '', code:'', value:''}, // 自定义输入框
        *      { type: 'datetime', label:'', placeholder: '', code:'', value:''},  // 自定义时间选择器
@@ -358,6 +356,7 @@
         multipleSelection: [], // 选择的数组
         dialogName: '',
 
+        isShowSelection: false, // 是否显示多选
         isShowNewButton: false, // 是否显示新建
         isShowEditDataButton: false, // 是否显示编辑
         isShowDeleteButton: false, // 是否显示删除
@@ -481,6 +480,11 @@
             }
           })
         }
+        if (self.showColumns) {
+          _.map(self.showColumns, function(item, index) {
+            item.isSort = item.isSort === undefined ? false : item.isSort === true ? 'custom' : false
+          })
+        }
 
         // 处理过滤条件
         if (self.filters) {
@@ -511,12 +515,19 @@
         console.log(request.defaults)
         console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`)
       },
+      // 设置自定义组件
       setDefinedOperate() {
         const self = this
         if (self.userDefined.definedOperate) {
           self.definedOperate = self.userDefined.definedOperate
         }
       },
+      // 排序
+      sortChange(row) {
+        this.listQuery.sortItem = row.prop
+        this.listQuery.sortOrder = row.order === 'descending' ? 'desc' : 'asc'
+        this.getList()
+      },
       getList() {
         const self = this
         self.listLoading = true
@@ -748,6 +759,9 @@
           self.isShowDetail = self.options.showDetail.isShow
           self.operationWidth += 50
         }
+        if (self.options.showSelection) { // 设置是否显示多选
+          self.isShowSelection = self.options.showSelection
+        }
       },
       handleSelectionChange(val) {
         this.multipleSelection = val

src/views/haomo/components/tables/index.vue

@@ -24,7 +24,7 @@
     },
     data() {
       return {
-        showUserColumns: ['mobile', 'loginid', 'username', 'email', 'createTime'],
+        showUserColumns: [{ name: '手机号', codeCamel: 'mobile', isSort: true }, { name: '登录ID', codeCamel: 'loginid', isSort: true }, 'username', 'email', 'createTime'],
         userFilters: [
           { placeholder: '过滤手机号', 'mobile': { 'like': '' }, isShow: true },
           { placeholder: '过滤用户名', 'username': { 'equalTo': '' }, isShow: true },
@@ -73,6 +73,7 @@
         showExport: true,
         showDeleteButton: true,
         buttonGroup: false,
+        showSelection: false,
         showDetail: {
           isShow: true,
           showColumns: ['mobile', 'loginid', 'username', 'email']
@@ -86,8 +87,8 @@
         definedOperate: [
           { type: 'select', label: '', placeholder: '类型', options: [{ label: '姓名', code: 'username' }, { label: '登录ID', code: 'loginid' }], value: '' },
           { type: 'input', label: '', placeholder: '邮箱', code: 'email', value: '' },
-          { type: 'datetime', label: '', placeholder: '创建时间', code: 'createTime', value: '' },
-          { type: 'button', label: '搜索', icon: 'el-icon-search', func: this.dropDown }]
+          { type: 'datetime', label: '', placeholder: '创建时间', code: 'createTime', value: '' }
+        ]
       }
     },
     methods: {