Element el-table表格项添加必填校验

先看效果图:
在这里插入图片描述
需求:对下拉框必填项进行红框校验,直接看代码:
html

<el-form :model="tableForm" ref="tableForm" :rules="rules" size="small">
      <el-table :data="tableForm.tableData" border :loading="loading">
   		<el-table-column label="类型" prop="fileType">
          <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.fileType'"
                :rules="rules.fileType"
              >
                <el-select v-model="scope.row.fileType" placeholder="请选择">
                  <el-option label="文件类" value="文件类"></el-option>
                  <el-option label="文本输入类" value="文本输入类"></el-option>
                </el-select>
              </el-form-item>
          </template>
        </el-table-column>
      </el-table>
   </el-form>

js

data() {
    return {
      tableForm: {
        //附属条件表格
        tableData: []
      },
      rules: {
        fileType: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }
        ]
      },
    }
  },
  methods: {
    validateKey(rule, value, callback) {
      if (value === '') {
        callback(new Error('请选择类型'))
      } else {
        callback()
      }
    },
     // 保存按钮
    submit(tableData) {
      // console.log(tableData)
      this.$refs.tableForm.validate((valid) => {
        if (valid) {
		// 业务逻辑操作代码...
        }
      })
    },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐