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

最新推荐文章于 2024-07-25 11:05:20 发布

RosyClouds~

最新推荐文章于 2024-07-25 11:05:20 发布

阅读量1w

点赞数 6

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_45213494/article/details/124788360

版权

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>

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) {
		// 业务逻辑操作代码...
        }
      })
    },