7/30 限制前端输入字数

src/components/Holder/appUser.vue

@@ -1,6 +1,26 @@
 <template>
   <slot name="default" />
   <el-dialog append-to-body v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="1050">
+    <nav class="flex flex-items-center mb-8 justify-between">
+      <div class="flex flex-items-center">
+        <div class="flex flex-items-center mr-20px">
+          <div style="width: 80px; text-align: right; padding-right: 10px">业主账号</div>
+          <div class="flex-1">
+            <el-input clearable @clear="handleClear" style="width: 200px" v-model="queryParams.userName" placeholder="请输入业主账号"></el-input>
+          </div>
+        </div>
+        <div class="flex flex-items-center mr-20px">
+          <div style="width: 60px; text-align: right; padding-right: 10px">手机号</div>
+          <div class="flex-1">
+            <el-input clearable @clear="handleClear" style="width: 200px" v-model="queryParams.userPhone" placeholder="请输入手机号"></el-input>
+          </div>
+        </div>
+      </div>
+      <div>
+        <el-button type="primary" @click="getList">查询</el-button>
+        <el-button @click="resetQuery">重置</el-button>
+      </div>
+    </nav>
     <el-table v-loading="loading" ref="multipleTableRef" :data="tableData" border @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="业主" align="center">
@@ -64,7 +84,9 @@ const dialog = ref({
 
 const queryParams = ref({
   pageNum: 1,
-  pageSize: 10
+  pageSize: 10,
+  userPhone: '',
+  userName: ''
 });
 
 const multipleTableRef = ref();
@@ -101,7 +123,10 @@ const handleUserSelection = () => {
 };
 
 // ====================== 方法 ======================
-
+function handleClear() {
+  queryParams.value.userName = '';
+  getList();
+}
 // 获取列表
 function getList() {
   isFetching.value = true; // 加锁
@@ -164,7 +189,9 @@ function handleSelectionChange(selection: AppUserList[]) {
 function resetQuery() {
   queryParams.value = {
     pageNum: 1,
-    pageSize: 10
+    pageSize: 10,
+    userPhone: '',
+    userName: ''
   };
   getList();
 }