[update]完成表单页面

src/components/ListTables/headeraction.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <el-button type="primary" size="small" @click="handleClick">{{ this.$t('users.createUser') }}</el-button>
-    <el-select v-model="value" size="small" placeholder="请选择" style="width:150px; margin-left:10px;">
+    <el-select v-if="hasSelection" :disabled="selectDisable" v-model="value" size="small" placeholder="更多操作" style="width:150px; margin-left:10px;">
       <el-option label="批量删除" value="delete" />
+      <el-option label="批量更新" value="delete" />
+      <el-option label="禁用所选" value="delete" />
+      <el-option label="激活所选" value="delete" />
     </el-select>
-    <el-button style="margin-left:10px;" type="primary" size="small" @click="handleAction">执行</el-button>
   </div>
 </template>
 
@@ -12,6 +14,16 @@
 export default {
   prop: {
 
+  },
+  props: {
+    hasSelection: {
+      type: Boolean,
+      default: () => true
+    },
+    selectDisable:{
+      type:Boolean,
+      default:() =>true
+    }
   },
   data() {
     return {

src/components/ListTables/table.vue

@@ -2,7 +2,7 @@
   <div>
     <div style="display:flex;flex-direction:row;justify-content:space-between;">
       <!--TODO: 事件交互 -->
-      <headeraction v-if="hasHeader" class="actionHeader" style="display:flex;flex-direction:row;" @newClick="handleNewClick" @actionClick="handleActionClick" />
+      <headeraction v-if="hasHeader" class="actionHeader" :has-selection="hasSelect" :select-disable="selectDisable" style="display:flex;flex-direction:row;" @newClick="handleNewClick" @actionClick="handleActionClick" />
       <!-- TODO: 事件交互 -->
       <search v-if="hasSearch" class="search" @serachAction="handleSearch" />
       <slot name="header" />
@@ -11,6 +11,7 @@
       <el-table
         v-loading="loading"
         :data="tabledata"
+        @selection-change="handleSelectionChange"
         stripe
       >
         <el-table-column
@@ -44,12 +45,12 @@
           <template slot-scope="scope">
             <el-button
               size="mini"
-              type="text"
+              type="primary"
               @click="handleEdit(scope.$index, scope.row)"
             >{{ $t('usergroup.update') }}</el-button>
             <el-button
               size="mini"
-              type="text"
+              type="warning"
               @click="handleDelete(scope.$index, scope.row)"
             >{{ $t('usergroup.delete') }}</el-button>
           </template>
@@ -57,12 +58,13 @@
         <slot name="extraAction" />
       </el-table>
       <el-pagination
-        style="text-align:center;margin-top:20px;"
+        style="text-align:right;margin-top:20px;"
         :current-page="current_page"
+        background
         :page-sizes="[10, 20, 50, 100]"
         :page-size="page_size"
         :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
+        layout="total, sizes, prev, pager, next"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
@@ -88,7 +90,7 @@ export default {
     },
     align: {
       type: String,
-      default: 'left',
+      default: 'left'
     },
     hasSelect: {
       type: Boolean,
@@ -119,7 +121,9 @@ export default {
       current_page: 1,
       total: 0,
       offset: 0,
-      headeractiontext: 'title'
+      headeractiontext: 'title',
+      multipleSelection:[],
+      selectDisable:true
     }
   },
   created() {
@@ -145,6 +149,10 @@ export default {
         this.loading = false
       })
     },
+    handleSelectionChange(val) {
+        this.multipleSelection = val;
+        (val.length>0) ? (this.selectDisable = false) : (this.selectDisable = true)
+      },
     handleEdit: function(index, row) {
       try {
         this.$router.push({ name: this.action.hasEdit, params: { id: row.id }})
@@ -198,4 +206,17 @@ export default {
 .table{
   margin-top: 15px;
 }
+
+//分页
+.el-pagination /deep/ .el-pagination__total{
+  float: left;
+}
+
+.el-pagination /deep/ .el-pagination__sizes{
+  float: left;
+}
+//修改颜色
+// .el-button--text{
+//   color: #409EFF;
+// }
 </style>

src/views/users/UserGroupList.vue

@@ -10,13 +10,13 @@
 </template>
 
 <script>
-import { IBox, Page } from '@/layout/components'
+import { Page } from '@/layout/components'
 import Tables from '@/components/ListTables/table'
 import { getUserGroupList } from '@/api/user'
 export default {
   components: {
     Page,
-    Tables,
+    Tables
   },
   data() {
     return {