m

src/views/weixingrong/OBUQuery/OBUQuery.vue

@@ -1,10 +1,14 @@
 <script lang='ts' setup>
-    import { reactive } from 'vue';
-    const OBUList = reactive({
+
+import { reactive } from 'vue';
+const labelWith = 68
+const OBUList = reactive({
         cno: '',
         carNo: '',
         carColors: '',
         OBUno: '',
+        pages: 10,
+        status:''
     })
 const options = [
   {
@@ -28,6 +32,20 @@ const options = [
     label: 'Option5',
   },
 ]
+const pages =[
+    {
+        value: '10',
+        label: '10',
+    },
+    {
+        value: '20',
+        label: '20',
+    },
+    {
+        value: '30',
+        label: '30',
+    }
+]
 const colors = [{
             value: 'Option1',
             label: '蓝色',
@@ -125,7 +143,7 @@ const handleEdit = (item:any,v:any) => {
                 <el-input v-model="OBUList.carNo" placeholder="车牌号码" />
             </el-form-item>
             <el-form-item label="车牌颜色">
-                <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
+                <el-select v-model="OBUList.carColors" placeholder="请选择">
                     <el-option
                     v-for="item in colors"
                     :key="item.value"
@@ -137,9 +155,9 @@ const handleEdit = (item:any,v:any) => {
             <el-form-item label="OBU编号">
                 <el-input v-model="OBUList.OBUno" placeholder="OBU编号" />
             </el-form-item>
-            <el-form-item><el-button type="primary">读OBU</el-button></el-form-item>
-            <el-form-item label="状态">
-                <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
+            <el-form-item><el-button type="primary" icon="Tools">读OBU</el-button></el-form-item>
+            <el-form-item label="状态" :label-width="labelWith">
+                <el-select v-model="OBUList.status" placeholder="请选择">
                     <el-option
                     v-for="item in options"
                     :key="item.value"
@@ -149,9 +167,9 @@ const handleEdit = (item:any,v:any) => {
                 </el-select>
             </el-form-item>
             <el-form-item label="每条页数">
-                <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
+                <el-select v-model="OBUList.pages" placeholder="请选择" class="pageSelect">
                     <el-option
-                    v-for="item in options"
+                    v-for="item in pages"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
@@ -159,7 +177,7 @@ const handleEdit = (item:any,v:any) => {
                 </el-select>
             </el-form-item>
             <el-form-item><el-button type="primary" icon="Search">查询</el-button></el-form-item>
-            <el-form-item><el-button type="warning" plain icon="Refresh">重置</el-button></el-form-item>
+            <el-form-item><el-button type="warning" icon="Refresh">重置</el-button></el-form-item>
         </el-form>
         <el-table :data="tableData" style="width: 100%">
             <el-table-column type="index" label="序号" width="64" fixed align="center" />
@@ -183,4 +201,14 @@ const handleEdit = (item:any,v:any) => {
 .el-form--inline .el-form-item{
     margin-right: 16px;
 }
+
+.el-select{
+    width: 168px;    
+}
+.el-select-dropdown__item{
+    font-family: "Microsoft Yahei";
+}
+.pageSelect{
+    width: 80px;
+}
 </style>