vxe-table 可编辑表格 行内编辑以及验证 集成element-UI

  
    
  
  
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
  
  
    
  
  
    
  
  
    
  

export default {
data() {
  //自定义校验方法
  const validatePass = (rule, value, callback) => {
    if (value == "" || value == null) {
      callback(new Error("good"));
    } else {
      callback();
   }
 };
 return {
  onedit: false,
  regionList: [],
  tableData: [],
  sexList: [{ value: "0", label: "男" }, { value: "1", label: "女" }],
  //验证和正常表单一样
  validRules: {
    name: [
      { required: true, message: "app.body.valid.rName" },
      { min: 3, max: 50, message: "名称长度在 3 到 50 个字符" }
    ],
    sex: [{ required: true, message: "性别必须填写" }],
    describe: [
      {
        validator: validatePass //自定义校验方法
      }
    ]
  }
};
},
methods: {
//新增数据
insertEvent(row) {
  let record = {
    sex: "1",
    date: new Date(),
    date1: new Date(),
    name: "new",
    describe: "GOOD"
 };
  this.$refs.xTable.insertAt(record, row);----------------------------新增一行数据
// .then(({ row }) => this.$refs.xTable.setActiveCell(row, "sex"));-----设置行处于编辑状态（设定焦点所在）
},
//单元格双击事件
dbclickFun(cell) {
  this.onedit = false;
},
//保存数据
saveFun() {
  var nowdata = this.$refs.xTable.getCurrentRow();----------获取当前行数据
  if (nowdata != null) {
    //走保存
    alert(nowdata);
  }
},
//下拉框改变
sexupda(scopevalue) {
  copevalue.row.describe = "改了改了";-------------------------可更改其它内容
  //this.onedit=true;
  this.$refs.xTable.updateStatus(scopevalue);---------------------------更新状态
},
//时间框改变
dateupda(scopevalue) {
  //this.onedit=true;
},
//格式化时间类型
formatDate(value, format) {
  if (value != null && value != "") {
    return this.$utils.dateToString(value, format);
  }
},
//下拉框回显内容
getSelectLabel(value) {
  let result = "";
  if (value == "1") {
    result = "女";
  } else {
    result = "男";
  }
  return result;
},
removeEvent(row) {
  if (row.id) {----实际应用时，可判断其它行属性（删除实际数据--走后台删除  删除临时数据则remove）
    MessageBox.confirm("确定删除该数据?", "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      this.$refs.xTable.remove(row);
    })
    .catch(e => e);
 } else {
    this.$refs.xTable.remove(row);
}
}
}
};