添加表格元素

src/views/update/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {ref, reactive} from 'vue';
+
 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) => {
@@ -36,6 +37,8 @@ const resetSearch = (formData) => {
     return formData.resetFields()
 }
 
+
+const tableData = []
 </script>
 
 <template>
@@ -46,20 +49,39 @@ const resetSearch = (formData) => {
       :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"></el-input>
+          <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>