首页 前端知识 element el-table实现动态新增、编辑表格以及动态校验,自定义校验

element el-table实现动态新增、编辑表格以及动态校验,自定义校验

2024-10-30 21:10:27 前端知识 前端哥 986 211 我要收藏

文章目录

    • 一 概要
    • 二 动态校验
    • 三 完整代码
    • 四 小结
    • 自定义校验

一 概要

在项目中遇到设置签到的情况,如图所示,在后台中需要可以设置签到任务。这就需要用el-table实现动态新增、编辑表格。同时也会遇到动态校验的场景。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在点击新增任务的时候,会给一些默认的属性,isEditor: false, 这个属性是表示你是否需要编辑

  addTask() {
      this.model.clockTaskList.push({
        name: "",
        link: "",
        number: "",
        points: "",
        isEditor: false,
        picture: []
      })
    },

isEditor为true的时候输入框显示,然后可以进行编辑,false的时候就显示数据

      <el-table-column prop="name" label="任务名称" align="center">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'clockTaskList['+scope.$index+'].name'"
                  :rules="rules.clockTaskList.name"
                >
                  <el-input v-model="scope.row.name" v-show="scope.row.isEditor"/>
                </el-form-item>
                <span v-show="!scope.row.isEditor">{{ scope.row.name }}</span>
              </template>
            </el-table-column>

在这里插入图片描述

二 动态校验

  • : :prop="'clockTaskList['+scope.$index+'].name'" 会被解析为实际的属性名,例如
    clockTaskList[0].name、clockTaskList[1].name 等,这取决于 scope.$index的值。这样做可以确保表单控件与 Vue 实例中的数据正确地绑定
  • :prop=“‘clockTaskList[’ + index + ‘].name’” 动态地绑定了每个输入框的 name 属性,同时在 v-validate 中也使用了动态属性名来设置验证规则,确保每个任务名称都能被正确地校验。
  <el-table-column prop="name" label="任务名称" align="center">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'clockTaskList['+scope.$index+'].name'"
                  :rules="rules.clockTaskList.name"
                >
                  <el-input v-model="scope.row.name" v-show="scope.row.isEditor"/>
                </el-form-item>
                <span v-show="!scope.row.isEditor">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
 rules: {
        points: [
          {required: true, message: '请输入签到积分', trigger: 'blur'},
        ],
        continuousPoints: [
          {required: true, message: '请输入连续签到积分', trigger: 'blur'},
        ],
        clockTaskList: {
          name: [
            {required: true, message: "请输入任务名称", trigger: 'blur'}
          ],
          number: [
            {required: true, message: "请输入任务数量", trigger: 'blur'}
          ],
          picture: [
            {required: true, message: "请上传图片", trigger: 'blur'}
          ],
          points: [
            {required: true, message: "请输入积分", trigger: 'blur'}
          ]
        }
      },

三 完整代码

 <el-form-item label="签到任务">
          <div class="main-button">
            <div style="margin-left: 85%;margin-right:50px;cursor: pointer;color: blue" @click="addTask">新增任务</div>
            <div style="cursor: pointer;margin-right:20px;color: red" @click="save">保存</div>
            <div style="cursor: pointer; color: red" @click="addTask">打卡详情</div>

          </div>
          <el-table
            :data="model.clockTaskList" style="width: 100%" border>
            <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
            <el-table-column prop="name" label="任务名称" align="center">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'clockTaskList['+scope.$index+'].name'"
                  :rules="rules.clockTaskList.name"
                >
                  <el-input v-model="scope.row.name" v-show="scope.row.isEditor"/>
                </el-form-item>
                <span v-show="!scope.row.isEditor">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="picture" label="任务图片" align="center">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'clockTaskList['+scope.$index+'].picture'"
                  :rules="rules.clockTaskList.link"
                >
                  <material v-model="scope.row.picture" v-show="scope.row.isEditor" :max-number="1"
                            style="height: 100px;"
                            @change="changeCover"/>
                </el-form-item>
                <el-image v-show="!scope.row.isEditor" :src="scope.row.link" style="width: 100px;height: 100px;"/>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="任务数量" align="center">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'clockTaskList['+scope.$index+'].number'"
                  :rules="rules.clockTaskList.number"
                >
                  <el-input v-model="scope.row.number" v-show="scope.row.isEditor"/>
                </el-form-item>
                <span v-show="!scope.row.isEditor">{{ scope.row.number }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="points" label="积分" align="center">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'clockTaskList['+scope.$index+'].points'"
                  :rules="rules.clockTaskList.points"
                >
                  <el-input v-model="scope.row.points" v-show="scope.row.isEditor"/>
                </el-form-item>
                <span v-show="!scope.row.isEditor">{{ scope.row.points }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="240" align="center">
              <template slot-scope="scope">
                <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                <el-button type="primary" @click="saveRow(scope.row)">保存</el-button>
                <el-button type="danger" @click="delRow(scope.row,scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

校验规则

   rules: {
        points: [
          {required: true, message: '请输入签到积分', trigger: 'blur'},
        ],
        continuousPoints: [
          {required: true, message: '请输入连续签到积分', trigger: 'blur'},
        ],
        clockTaskList: {
          name: [
            {required: true, message: "请输入任务名称", trigger: 'blur'}
          ],
          number: [
            {required: true, message: "请输入任务数量", trigger: 'blur'}
          ],
          picture: [
            {required: true, message: "请上传图片", trigger: 'blur'}
          ],
          points: [
            {required: true, message: "请输入积分", trigger: 'blur'}
          ]
        }
      },
    delRow(row, index) {
      this.model.clockTaskList.splice(index, 1)
    },
    saveRow(row) {
      this.$refs['formApplicationConfig'].validate((valid) => {
        if (valid) {
          this.$set(row, 'isEditor', false)
          this.$set(row, 'link', row.picture ? row.picture.toString() : '')
        }
      })
    },
    edit(row) {
      row.isEditor = true;
    },
    addTask() {
      this.model.clockTaskList.push({
        name: "",
        link: "",
        number: "",
        points: "",
        isEditor: false,
        picture: []
      })
    },

四 小结

1.有时候明明给一个变量赋了值,但是他不在页面上中显示。我们可以用this.$set添加一个响应式的变量

 this.$set(row, 'isEditor', false)

在 Vue.js 中,this.$set 是一个用于在响应式对象上设置属性的方法。它可以用于在 Vue
实例的数据对象或组件的响应式属性上添加新的属性,确保新添加的属性也是响应式的。

自定义校验

 data() {
    const validateNoticeTime = (rule, value, callback) => {
      if (this.model.timeType === undefined || this.model.timeType === '' || !this.model.time) {
        return callback(new Error('请选择通知时间'))
      }
      callback()
    }
    
     const validatePass2 = (rule, value, callback) => {
     if (value === '') {
         callback(new Error('请再次输入密码'));
     } else if (value !== this.ruleForm.pass) {
         callback(new Error('两次输入密码不一致!'));
     } else {
         callback();
}
    return {
      model: {},
      rules: {
        name: [
          {required: true, message: '请输入任务名称', trigger: 'blur'},
          {min: 1, max: 50, message: '长度为1-50位', trigger: 'blur'}
        ],
        noticeTime: [
          {validator: validateNoticeTime, trigger: 'blur'}
        ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
      }
    }
  },

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19646.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!