el-form+el-table 格式校验

小松学Java2022
已于 2023-04-19 16:42:14 修改
阅读量309
点赞数
文章标签： vue.js javascript ecmascript
于 2023-04-18 15:32:25 首次发布
本文链接：https://blog.csdn.net/qq_43595591/article/details/130223187
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格+form</title>

    <link rel="stylesheet" href="./elementui/index.css" />
    <script src="vue-2.6.12.js"></script>
    <script src="./elementui/index.js"></script>
    <style>
        .el-select .el-input {
          width: 100px;
        }
        .input-with-select .el-input-group__prepend {
          background-color: #fff;
        }

        .el-table .success-row {
    background: #f0f9eb;
  }

  
    </style>
</head>
<body>
    <div id="app">
    
        <el-button @click="add" type="primary" :disabled="(isdisabled || !(form.tableData.length <=4) )">新增</el-button>


        <el-form ref="form" :rules="rules" :model="form">

          <el-table ref="table" :data="form.tableData" border stripe  tooltip-effect="dark"  :row-style="{height:'20px'}" :cell-style="{padding:'0px 0px'}"  class="table">

            <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>

            <el-table-column>
              <template slot="header">
                <p style="text-align: center">
                  实例ID
                </p>
              </template>

              <template slot-scope="scope">
               
                <el-form-item :prop=" 'tableData.' + scope.$index + '.name' " :rules="[
                {
                  ...rules.name[0],
                  row: scope.row,
                  index: scope.$index
                },
              ]">
                  <el-input v-model="scope.row.name" :disabled="scope.row.flag" @blur="scope.row.name=scope.row.name.toUpperCase()" ></el-input>
                </el-form-item>
              </template>

            </el-table-column>


            <el-table-column>
              <template slot="header">
                <p style="text-align: center">
                  实例地址
                </p>
              </template>
              <template slot-scope="scope">
              
                <el-form-item :prop=" 'tableData.' + scope.$index + '.age' " :rules="[
                {
                  ...rules.age[0],
                  row: scope.row,
                  index: scope.$index
                },
              ]">
                  
                    <el-input placeholder="请输入IP" v-model="scope.row.age" class="input-with-select" :disabled="scope.row.flag">
                        <el-select v-model="scope.row.protocol" slot="prepend" placeholder="请选择协议" :disabled="scope.row.flag">
                          <el-option label="HTTP" value="http://"></el-option>
                          <el-option label="HTTPS" value="https://"></el-option>
                        </el-select>
                      </el-input>
                  
                </el-form-item>
                
              </template>
            </el-table-column>


            <el-table-column
            fixed="right"
            width="400">
            <template slot="header">
              <p style="text-align: center">
                操作
              </p>
            </template>
            <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text"  v-show="scope.row.flag" :disabled="isdisabled">查看</el-button>
            <el-button @click="edit(scope.row,scope.$index)" type="text"  v-show="scope.row.flag" :disabled="isdisabled">编辑</el-button>
            <el-button @click="cancle(scope.row,scope.$index)" type="text"v-show="!scope.row.flag">取消</el-button>
            <el-button @click="save(scope.row,scope.$index)" type="text"v-show="!scope.row.flag">保存</el-button>
            </template>
          </el-table-column>
        
          </el-table>
        </el-form>
      </div>



      <script>
        const app = new Vue({
            el:'#app',
            data() {

    return {
      form: {
        tableData: [
            {
                name:'zhangsan',
                age:11, 
                protocol:'http://',
                flag:true         
            },
            {
                name:'lisi',
                age:20,
                protocol:'https://',
                flag:true  
            }
        ]
      },
      temp:{},
  
      rules: {
        name: [
          // { required: true, message: "名字不能为空", trigger: "blur" },
              {
                validator: (rule, value, callback, source, options) => {
                  console.log('----------')
                  if(!value){
              callback(new Error('ID不能为空'))
             }
                  let array = []
                  this.form.tableData.forEach(item =>{
                    array.push(item.name.toUpperCase())
                  })
                  
                  if(Array.from(new Set(array)).length < this.form.tableData.length){
                    callback(new Error('不能重复'))
                  }
                  else {
                    callback()
                  }
                },
                required: true,
                trigger: "blur",
              }
    ],
        age: [
        {
          validator: (rule, value, callback, source, options) => {
             
              console.log(rule.row.age, '当前行的数据');
              console.log(rule.index)

             if(!value){
              callback(new Error('地址不能为空'))
             }
              if(rule.row.age > 10){
                
                callback(new Error('不能超过10'))
              }
              else{
                callback()
              }
          },
          required: true,
          trigger: "blur",

        }
      ],
        // validator: bankRule
      }
    };
  },
 
  methods: {
    add() {
      this.form.tableData.push({
        name: "",
        age: "",
        protocol:'http://',
        flag:false
      });
      this.temp = {}
    },
    del(index) {
      this.form.tableData.splice(index, 1);
    },
   
    handleClick(row) {
        console.log(row.name);
      },
      edit(row,val){
  
        this.temp = {...row}
        this.form.tableData.map((item,index) =>{
            if(index == val){
                item.flag = false   
            }
            else{
                item.flag = true 
            }
        })
       
      },
     
      cancle(row,val){
        console.log('temp = ',this.temp)
        let a = this.form.tableData.every(item => item.flag)
        console.log()
        if((JSON.stringify(this.temp) == '{}') && !a){
	        // 删除当前项
          this.form.tableData.splice(val, 1);
          return true
        }
     
       
        this.form.tableData.some((item,index) =>{
          console.log(index)
            if(index == val){
              let {name,age,protocol} = {...this.temp}
              item.flag = true
              item.name = name
              item.age = age
              item.protocol = protocol
              return true
            }
            
        })

        // 只想把提示去掉
        this.$refs.form.clearValidate();
      },
      save(row,val){

        console.log(val)

      if (!this.validateField('form', val)) return;
      console.log('22222222222')
      this.form.tableData.map((item,index) =>{
            if(index == val){
                item.flag = true   
            }
        })
        
      } ,
      // 校验
      validateField(form, index) {
                let result = true;
                for (let item of this.$refs[form].fields) {
                    if (item.prop.split(".")[1] == index) {
                        this.$refs[form].validateField(item.prop, err => {
                            if (err != "") {
                                result = false;
                            }
                        });
                    }

                    if (item.prop.split(".")[0] == index) {
                        this.$refs[form].validateField(item.prop, err => {
                            if (err != "") {
                                result = false;
                            }
                        });
                    }
                    if (!result) break;
                }
                return result;
            }, 
  },
  computed:{
    isdisabled(){
      return !(this.form.tableData.every(item => item.flag))
    }
  }
        })
      </script>
</body>
</html>