门类管理 浏览排序规则设置 最多只可选择3个字段进行排序

src/views/category/orderingRule/index.vue

@@ -2,7 +2,7 @@
   <div class="format-main">
     <div class="format-main-left">
       <div class="head-container">
-        <el-button v-permission="permission.add" size="mini" icon="el-icon-plus" :disabled="table.left.selections.length == 0" @click="toAdd(table.left.selections)">
+        <el-button v-permission="permission.add" size="mini" icon="el-icon-plus" :disabled="table.left.selections.length == 0 || orderFieldsSum >3" @click="toAdd(table.left.selections)">
           新增
         </el-button>
       </div>
@@ -25,6 +25,7 @@
           删除
         </el-button>
         <el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button>
+        <span class="tip">注意：最多只可选择3个字段进行排序</span>
       </div>
       <!--表格渲染-->
       <el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" style="min-width: 100%;" height="calc(100vh - 302px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')">
@@ -97,6 +98,13 @@ export default {
       }
     }
   },
+  computed: {
+    // 计算属性的 getter
+    orderFieldsSum: function() {
+      // `this` 指向 vm 实例
+      return this.table.left.selections.length + this.table.right.data.length
+    }
+  },
   created() {
     // this.crud.title = this.title
     // this.crud.query = {
@@ -194,4 +202,11 @@ export default {
     flex-grow: 1;
   }
 }
+.tip {
+  padding-left: 20px;
+  font-style: normal;
+  font-weight: bold;
+  color: #fff;
+  font-size: 12px;
+}
 </style>