element-ui的el-form表单和el-table校验嵌套使用校验el-input和el-select

场景:前端开发中,经常会遇到比较多的表单填写页面,其中有el-form,el-table,表格的每一列中又嵌套着输入框或者下拉框,然后每个还需要做单独的校验

效果:

  点击保存可校验el-input和el-select是否有值,不符合校验规则就标红提醒

 

1.el-form嵌套el-table

  • 1.el-form里面嵌套el-table
    <el-form :model="formData" :rules="formData.rules" ref="formRef">
        <el-table
           :data="formData.tableData"
           style="width: 100%">
           <el-table-column
             prop="id"
             label="单号"
             width="100">
           </el-table-column>
         </el-table>
    </el-form>
    
  • 2.在el-table-column自定义内容里面,嵌套el-form-item,里面再放el-input或者el-select结构
     <el-table-column
       prop="name"
        label="商品名"
        width="180">
        <template slot-scope="scope">
            <el-form-item>
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
        </template>
      </el-table-column>
    
  • 3.数据的结构
    因为el-form是最外层的,所以formData是个对象,对象里放el-table用到的数组和rules
    这样定义是为了校验时用到rules

 

 formData: {
    rules: {
        name: {
          required: true,
          message: '请输入商品名',
          tirgger: ['blur', 'change']
        },
        selected: {
          required: true,
          message: '请选择',
          tirgger: 'change'
        }
      },
      tableData: [
        {id: '001'},
        {id: '002'},
        {id: '003'},
      ]
    },

2.定义规则

1.el-form绑定: rules使用formData.rules整个对象,同时定义一个ref

<el-form :model="formData" :rules="formData.rules" ref="formRef">

2.保证prop必须唯一
自定义prop:使用 列表数据属性名+列的下标scope.$index+列的数据属性名

 <el-table-column
   prop="name"
    label="商品名"
    width="180">
    <template slot-scope="scope">
        <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="formData.rules.name">
          <el-input v-model="scope.row.name"></el-input>
        </el-form-item>
    </template>
  </el-table-column>

注意:如果不是使用列表数据属性名tableData,会出现报错
Error: please transfer a valid prop path to form item

 3.保证每一个el-form-item都要配置rules属性
rules使用formData.rules对应的属性的规则

3.完整代码

<template>
  <div>
    <el-form :model="formData" :rules="formData.rules" ref="formRef">
      <el-table
        :data="formData.tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="单号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名"
          width="180">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="formData.rules.name">
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="class"
          label="分类">
          <template slot-scope="scope">
           <el-form-item :prop="'tableData.' +scope.$index + '.class'" :rules="formData.rules.selected">
             <el-select v-model="scope.row.class">
                <el-option
                  v-for="item in classOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
           </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button @click="submitForm('formRef')">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        rules: {
          name: {
            required: true,
            message: '请输入商品名',
            tirgger: ['blur', 'change']
          },
          selected: {
            required: true,
            message: '请选择',
            tirgger: 'change'
          }
        },
        tableData: [
          {id: '001'},
          {id: '002'},
          {id: '003'},
        ]
      },
      classOption: [
        {
          value: 0,
          label: '分类1'
        },
        {
          value: 0,
          label: '分类1'
        }
      ]
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

  • 3
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
Element-UI是一个流行的基于Vue.js的前端组件库,其中`el-input`是用于创建各种输入元素如文本框、密码输入、搜索框等的基本组件。如果在使用过程中遇到`el-input`组件失效的情况,可能有以下几个原因: 1. **未正确安装或引入**: 确保已正确安装Element UI并将其添加到项目中。如果是Vue项目,可以在`main.js`文件中导入并注册。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 2. **组件绑定错误**: 检查你的HTML模板中是否正确地使用了`v-model`指令来双向数据绑定,例如: ```html <el-input v-model="inputValue" placeholder="请输入内容"></el-input> ``` 确保`inputValue`是在Vue实例中的响应式数据。 3. **props配置问题**: 如果你自定义了一些属性传递给`el-input`,确认这些属性名和值设置无误。 4. **样式冲突**: 其他CSS样式可能会覆盖Element-UI的样式,检查是否有其他样式表干扰到了输入框的显示。 5. **版本兼容性**: 确保使用Element-UI版本与项目的Vue版本兼容,不匹配可能导致某些组件无法正常工作。 6. **浏览器兼容性问题**: 测试一下是否在所有预期的浏览器环境下都能正常显示,有些CSS特性可能在旧版浏览器中不受支持。 如果你已经排除了上述常见问题但依然遇到问题,可以尝试提供更具体的代码片段或描述问题出现的具体场景,这样我能更好地帮助你定位问题。接下来是一些相关问题:
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值