Vue、ElementUi之table表格可编辑、动态添加行、数据校验

效果

标识只能是字母数字组合、并且只能以字母开头。

当类型是枚举的时候枚举值设置启用,可输入,其他类型的时候枚举值都禁用。

实现思路

elementUI的原生table组件是不支持编辑的,但是可以在里边自定义元素,给这个列里面加一个input就可以,如下:

          <el-table-column
            prop="ccaExplain"
            label="说明">
            <template slot-scope="scope">
              <el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaExplain'" :rules="rules.ccaExplain">
                <el-input v-model="scope.row.ccaExplain" autocomplete="off" size="small"/>
              </el-form-item>
            </template>
          </el-table-column>

校验也差不多,上面那个代码也写出来了,就是<el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaExplain'" :rules="rules.ccaExplain">

页面代码

      <el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="90px" size="small">
        <el-button-group style="margin-bottom: 5px">
          <el-button size="mini" icon="el-icon-circle-plus-outline" @click="addTableRow">添加</el-button>
        </el-button-group>

        <el-table
          :data="form.cdcTypeVal"
          size="mini"
          border
          style="width: 100%">
          <el-table-column
            type="index"
            width="30">
          </el-table-column>
          <el-table-column
            prop="ccaGuid"
            width="100px"
            label="标识">
            <template slot-scope="scope">
              <el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaGuid'" :rules="rules.ccaGuid">
                <el-tooltip content="只能是数字和字母,并且字母开头!" placement="bottom">
                  <el-input v-model="scope.row.ccaGuid" autocomplete="off" content="只能是数字和字母,并且字母开头!" size="small"/>
                </el-tooltip>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="ccaType"
            label="类型">
            <template slot-scope="scope">
              <el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaType'" :rules="rules.ccaType">
                <el-select v-model="scope.row.ccaType" placeholder="请选择" size="small" @change="changeCcaType(scope.$index,scope.row)">
                  <el-option label="文字" value="3"/>
                  <el-option label="整数" value="1"/>
                  <el-option label="小数" value="2"/>
                  <el-option label="枚举" value="4"/>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="ccaLength"
            width="100px"
            label="长度">
            <template slot-scope="scope">
              <el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaLength'" :rules="rules.ccaLength">
                <el-input v-model.number="scope.row.ccaLength" autocomplete="off" size="small"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="ccaExplain"
            label="说明">
            <template slot-scope="scope">
              <el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaExplain'" :rules="rules.ccaExplain">
                <el-input v-model="scope.row.ccaExplain" autocomplete="off" size="small"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="ccaDefault"
            label="默认值">
            <template slot-scope="scope">
              <el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaDefault'" :rules="rules.ccaDefault">
                <el-input v-model="scope.row.ccaDefault" autocomplete="off" size="small"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="ccaEnum"
            label="枚举值">
            <template slot-scope="scope">
              <el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaEnum'" :rules="rules.ccaEnum">
                <el-input v-model="scope.row.ccaEnum" autocomplete="off" size="small" :disabled="scope.row.ccaEnumStatus"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            width="80px"
            label="操作">
            <template slot-scope="scope">
              <el-form-item>
                <el-button size="mini" type="danger" plain @click="delTableRow(scope.$index, scope.row)">删除</el-button>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

js代码

<script>
export default {
  name: "Type",
  data() {
    return {
      // 表单参数
      form: {
      },
      // 表单校验
      rules: {
        ccaGuid: [{
          validator:(rule,value,callback)=>{
            if(value != ""){
              if((/^[a-zA-Z][\da-zA-Z]*$/).test(value) === false){
                callback(new Error("不合法!"));
              }else{
                callback();
              }
            }else{
              callback(new Error("必填!"));
            }
          },
          required: true,
          trigger: 'blur'
        }],
        ccaExplain: [{
          required: true,
          message: '必填!',
          trigger: 'blur'
        }],
        ccaLength: [
          {
            validator:(rule,value,callback)=>{
              if(value != ""){
                if((/^\+?[1-9][0-9]*$/).test(value) === false){
                  callback(new Error("必须大于0"));
                }else{
                  callback();
                }
              }else{
                callback();
              }
            },
            required: true, trigger: 'blur'},
          { type: 'number', message: '必填!'}
        ]
      }
    };
  },
  methods: {
    /** 类型变更 设置枚举值禁用 */
    changeCcaType(index, obj) {
      if(obj.ccaType === 4 || obj.ccaType === "4"){
        this.form.cdcTypeVal[index].ccaEnumStatus = false
      }else{
        this.form.cdcTypeVal[index].ccaEnumStatus = true
      }
    },
    /** 添加种类类别值 */
    addTableRow() {
      this.form.cdcTypeVal.push({
        ccaGuid: '',
        ccaType: '',
        ccaLength: 200,
        ccaExplain: '',
        ccaDefault: '',
        ccaEnum: '',
        ccaEnumStatus: true
      })
    },
    /** 删除种类类别值 */
    delTableRow(index, row) {
      var that = this;
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //点击确定的操作(调用接口)
        that.form.cdcTypeVal.splice(index, 1);
      }).catch(() => {
        //点取消的提示
        return;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        cdcTypeVal: []
      };
      this.resetForm("form");
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.getTreeselect();
      if (row != null) {
        this.form.ctParentCode = row.ctCode;
      }
      if (row.ctLayer !== 1) {
        this.typeValStyle = {
          display: 'none'
        }
      }else{
        this.typeValStyle = {
          display: ''
        }
      }
      getType(row.ctCode).then(response => {
        this.form = response.data;
        if (row.ctLayer === 1) {
          this.form['cdcTypeVal'] = []
        }
        this.open = true;
        this.title = "修改光盘柜种类";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.ctCode != null) {
            updateType(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addType(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    }
  }
};
</script>

OK,就是这样了

 

版权声明:
作者:黯然gg
链接:https://3zi.cn/archives/657
来源:阿龙爱吃肉
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录