添加表格元素

src/views/update/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {ref, reactive} from 'vue';
-const cinemaSearch = reactive( {
+
+const cinemaSearch = reactive({
   ip: '',
   version: '',
 })
@@ -15,7 +16,7 @@ const ip_validate = (rule, value, callback) => {
 }
 
 const ipRule = reactive({
-  ip: [{validator: ip_validate, trigger: 'blur'}]
+  ip: [{validator: ip_validate, trigger: 'change'}]
 })
 
 const submitSearch = (formData) => {
@@ -25,7 +26,7 @@ const submitSearch = (formData) => {
     return formData.validate((valid) => {
       if (valid) {
         console.log('提交数据')
-      }else{
+      } else {
         console.log('提交失败')
       }
     })
@@ -36,30 +37,51 @@ const resetSearch = (formData) => {
     return formData.resetFields()
 }
 
+
+const tableData = []
 </script>
 
 <template>
-<el-form
-  ref="cinemaUpdate"
-  :model="cinemaSearch"
-  status-icon
-  :rules="ipRule"
-  label-width="120"
-  class="cinema-search"
->
-  <el-form-item label="影院IP" prop="ip">
-    <el-input v-model="cinemaSearch.ip"></el-input>
-  </el-form-item>
-  <el-form-item label="版本" prop="ver">
-    <el-input v-model="cinemaSearch.version"></el-input>
-  </el-form-item>
-  <el-form-item>
-    <el-button type="primary" @click="submitSearch(ruleFormRef)">搜索</el-button>
-  </el-form-item>
-  <el-form-item>
-    <el-button @click="resetSearch(ruleFormRef)">重置</el-button>
-  </el-form-item>
-</el-form>
+  <el-form
+      ref="cinemaUpdate"
+      :model="cinemaSearch"
+      status-icon
+      :rules="ipRule"
+      label-width="120"
+      class="cinema-search"
+      :inline="true"
+  >
+    <el-row>
+      <el-col span="4">
+        <el-form-item label="影院IP" prop="ip">
+          <el-input v-model="cinemaSearch.ip" placeholder="请输入完整的影院IP"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col span="4">
+        <el-form-item label="版本" prop="ver">
+          <el-input v-model="cinemaSearch.version"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col span="4">
+        <el-form-item>
+          <el-button type="primary" @click="submitSearch(ruleFormRef)">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="resetSearch(ruleFormRef)">重置</el-button>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="name" label="影院名称" width="240"></el-table-column>
+    <el-table-column prop="ip" label="影院IP" width="240"></el-table-column>
+    <el-table-column prop="zz_num" label="专资编码" width="120"></el-table-column>
+    <el-table-column prop="inner_id" label="鼎新编码" width="120"></el-table-column>
+    <el-table-column prop="db_user" label="数据库账号" width="120"></el-table-column>
+    <el-table-column prop="db_pwd" label="数据库密码" width="120"></el-table-column>
+    <el-table-column prop="sys_ver" label="系统版本" width="120"></el-table-column>
+    <el-table-column prop="client_ver" label="客户端版本" width="120"></el-table-column>
+  </el-table>
 </template>
 
 <style scoped>