elementUi中需要验证的表单、表格中序号栏

template中的代码

<!-- 添加ref，后面要通过refs获取到dom元素，判断是否都填写完整 -->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">  
        <!-- 绑定一个prop，在下面我们会设置相应的规则，进行比对 -->
          <el-form-item prop="name">
            <el-input v-model="ruleForm.name" class="loginIpt" placeholder="请输入登录ID">
              <template #prefix>
                <el-icon  color="#1E93E1" :size="20"><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="ruleForm.password" class="loginIpt" placeholder="请输入密码">
              <template #prefix>
                <el-icon :size="20" color="#1E93E1"><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <div class="flex a_c j_b">
            <el-checkbox v-model="checked" class="login_rember">记住密码</el-checkbox>
            <span>忘记密码？</span>
          </div>
          <el-form-item>
          <!-- 点击事件将上面定义好的ref：ruleForm传入进去 -->
            <el-button type="primary" @click="submitForm('ruleForm')" class="loginButton">登录</el-button>
          </el-form-item>
        </el-form>

js代码

import { User, Lock } from '@element-plus/icons-vue'  // 从elementui中引入icon组件
export default {
  name: 'loginPage',
  components: {
    // AlarmClock
    User, Lock
  },
  data() {
    return {
      checked: false,
      ruleForm: {    // 输入框标题
        name: '15321564',
        password: '1234567',
      },
      rules: {    // 输入框内容要求，名字要与输入框标题相同
        name: [
          { required: true, message: '请输入正确的ID', trigger: 'blur' },
          { max:10,min:3,message:"字符在3-10之间",trigger : "blur" },
          { pattern:/正则/,message:"提示信息",trigger:"触发方式"}
        ],
        password: [
          { required: true, message: '请输入正确的密码', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {   // 提交按钮
      this.$refs[formName].validate((valid) => {   // 通过$refs获取到dom元素，使用elementUi中的validate方法，判断必填项是否都填写
        console.log(valid); // 只要有一项必填项没有填，valid就是false
        if (valid) {
         // 调用接口

        } else {
          this.$message.error('请填写ID或密码');   // elementui在全局中安装好，这里就可以直接通过this来进行调用了
        }
      });
    },
  }
}

注意点

• 配置输入规则时的命名，要与输入框绑定的v-model中的变量相同，否则会失效
• 判断必填项是否都填写时，要为form定义ref属性，在点击提交时，叫ref属性以字符串的形式传入，在方法中通过$refs获取到dom元素，再通过validate方法，进行判断
• { pattern:/正则/,message:"提示信息",trigger:"触发方式"}，pattern后面的正则不需要加引号

表格序号

其他列可以循环出来，序号要单独写

 <!-- 序号 -->
            <el-table-column type="index" label="序号" width="80">
                <template #default="scope">
                    <div>
                    // page是父组件传过来的变量，里面存放当前页：page、每一页多少条信息：limit
                        {{(page.page-1)*page.limit +scope.$index+1}}
                    </div>
                </template>
            </el-table-column>

表格设置

在el-table标签中加上 table-layout="auto"实现每列宽度自适应