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

<vxe-table
  border
  show-overflow
  ref="xTable"  -------------------------------------------可根据此变量控制表格内容
  class="vxe-table-element"
  height="600"
  :data="tableData"--------------------------------表格绑定数据来源
  :edit-rules="validRules"--------------------------------验证规则（可不写--则行内不验证）
  @cell-dblclick="dbclickFun"----------------------------单元格双击触发方法（可不写）
  @edit-closed="saveFun"------------------------------编辑状态关闭触发方法（可不写）
  highlight-current-row------------------------------------选中当前行高亮（可不写）
  :edit-config="{trigger: 'dblclick', mode: 'row', showStatus: true,autoClear:onedit}"
  -----编辑设置（双击触发（可改成单击事件 或不写 手动触发），行事件（也可写成cell 则为单元格事件），显示状态，自动清除状态）
>
  <vxe-table-column type="index" width="80">
    <template v-slot:header="{ column }">
      <span>序号</span>
      <i class="el-icon-question"></i>
    </template>
  </vxe-table-column>
  <vxe-table-column
    field="name"
    title="ElInput"
    min-width="140"
    :edit-render="{type: 'default'}"
  >
    <template v-slot:edit="scope">
      <el-input v-model="scope.row.name" @input="$refs.xTable.updateStatus(scope)"></el-input>
    </template>
  </vxe-table-column>
  <vxe-table-column field="age" title="ElInputNumber" :edit-render="{type: 'default'}">
    <template v-slot:header="{ column }">
      <span>{{ column.title }}</span>
      <i class="el-icon-warning"></i>
    </template>
    <template v-slot:edit="{ row }">
      <el-input-number v-model="row.age" :max="35" :min="18"></el-input-number>
    </template>
  </vxe-table-column>
  <vxe-table-column field="sex" title="ElSelect" width="140" :edit-render="{type: 'default'}">
    <template v-slot:edit="scope">
      <el-select v-model="scope.row.sex" @change="sexupda(scope)">
      <!--可以使用change事件进行属性间的控制-->
        <el-option
          v-for="item in sexList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <template v-slot="{ row }">{{ getSelectLabel(row.sex) }}</template>
  </vxe-table-column>
  <vxe-table-column field="date" title="ElDatePicker" :edit-render="{type: 'default'}">
    <template v-slot:edit="{ row }">
      <el-date-picker
        v-model="row.date"
        type="date"
        format="yyyy/MM/dd"
        @change="dateupda(scope)"
      ></el-date-picker>
    </template>
    <template v-slot="{ row }">{{ formatDate(row.date, 'yyyy/MM/dd') }}</template>
  </vxe-table-column>
  <vxe-table-column field="date1" title="ElDatePicker" :edit-render="{type: 'default'}">
    <template v-slot:edit="{ row }">
      <el-date-picker v-model="row.date1" type="datetime" format="yyyy-MM-dd HH:mm:ss"> 
      </el-date-picker>
    </template>
    <template v-slot="{ row }">{{ formatDate(row.date1, 'yyyy-MM-dd HH:mm:ss') }} 
    </template>
  </vxe-table-column>
  <vxe-table-column field="date2" title="ElTimePicker" :edit-render="{type: 'default'}">
    <template v-slot:edit="{ row }">
      <el-time-select
        v-model="row.date2"
        :picker-options="{start: '08:30', step: '00:15', end: '18:30'}"
      ></el-time-select>
    </template>
  </vxe-table-column>
  <vxe-table-column field="rate" title="ElRate" :edit-render="{type: 'visible'}">
    <template v-slot:edit="{ row }">
      <el-rate v-model="row.rate"></el-rate>
    </template>
  </vxe-table-column>
  <vxe-table-column field="describe" title="描述" :edit-render="{type: 'default'}">
    <template v-slot:edit="scope">
      <el-input v-model="scope.row.describe" @input="$refs.xTable.updateStatus(scope)"> 
      </el-input>
    </template>
  </vxe-table-column>
  <vxe-table-column label="操作" width="100">
    <template v-slot="scope">
      <el-button size="mini" type="danger" @click="removeEvent(scope.row)">删除</el-button>
    </template>
  </vxe-table-column>
</vxe-table>
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);
}
}
}
};