表格实现行内编辑+输入框校验+必填项*

一 效果图

二 解决思路：基于elementui table的基础上增加了行内编辑。输入框的校验以及必填项*提醒，是使用的form表单，将 table表格跟form表单结合使用

结合方式看代码

 

<template>
  <div>
    <el-button @click="handleAdd()" type="primary">Add</el-button>
    <el-form
      :model="addJsonForm"
      :rules="addJsonForm.addJsonRules"
      :inline="true"
      label-width="108px"
    >
      <el-table :data="addJsonForm.params" style="width: 100%">
        <el-table-column
          v-for="(item, index, key) in table_columns"
          :item="item"
          :key="key"
          :index="index"
        >
          <template slot="header" slot-scope="scope">
            <span style="color: #2d65dc">{{ item.label }}</span>
            <i v-show="item.request === true" style="color: #f56c6c">*</i>
          </template>
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-form-item
                :prop="'params.' + scope.$index + '.' + item.prop"
                :rules="addJsonForm.addJsonRules[item.prop]"
              >
                <el-input
                  v-if="item.inputType === 'str'"
                  type="text"
                  v-model="scope.row[item.prop]"
                  autocomplete="off"
                ></el-input>
                <el-date-picker
                  v-if="item.inputType === 'obj'"
                  v-model="scope.row[item.prop]"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <span v-else-if="!scope.row.edit">{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- 全局控制的编辑 -->
            <div
              v-if="scope.row.add == undefined"
              style="display: inline-block"
            >
              <!-- 编辑 -->
              <el-button
                size="mini"
                v-if="!scope.row.edit"
                @click="handleEdit(scope.$index, scope.row)"
                type="primary"
                >Edit</el-button
              >
              <!-- 保存 -->
              <el-button
                size="mini"
                type="success"
                :plain="true"
                v-if="scope.row.edit"
                @click="handleSave(scope.$index, scope.row)"
                >Save</el-button
              >
            </div>
            <!-- 添加控制 -->
            <div
              v-if="scope.row.add != undefined && scope.row.add"
              style="display: inline-block"
            >
              <!-- 保存 -->
              <el-button
                size="mini"
                type="success"
                :plain="true"
                v-if="scope.row.edit"
                @click="handleSave(scope.$index, scope.row)"
                >Save</el-button
              >
            </div>
            <!-- 全局控制删除 -->
            <el-button
              size="mini"
              v-if="scope.row.add == undefined"
              :plain="true"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
export default {
  methods: {
    //编辑
    handleEdit(index, row) {
      row.edit = true;
    },
    //删除
    handleDelete(index, row) {
      this.addJsonForm.params.splice(index, 1);
      this.$message({
        message: "删除成功！",
        type: "success",
      });
    },
    //保存
    handleSave(index, row) {
      row.edit = false;
      delete this.addJsonForm.params[index].add;
      this.$message({
        message: "保存成功！",
        type: "success",
      });
    },
    handleAdd() {
      var addDataJson = {};
      for (var key in this.new_date_json) {
        if (key === "edit") {
          delete addDataJson[key];
        } else if (key === "add") {
          delete addDataJson[key];
        } else {
          addDataJson[key] = "";
        }
      }
      addDataJson.edit = true;
      addDataJson.add = true;
      this.addJsonForm.params.unshift(addDataJson);
    },
    //初始化编辑属性
    initEditAttribute() {
      var self = this;
      var edit = self.edit;

      var dataArray = [
        {
          date: "2016-05-03",
          name: "王小虎1",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          sex: 18,
        },
        {
          date: "2016-05-02",
          sex: 18,
          name: "王小虎2",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ];

      if (dataArray.length > 0) {
        //添加编辑事件
        for (var index in dataArray) {
          dataArray[index]["edit"] = false;
          this.addJsonForm.params.push(dataArray[index]);
        }

        if (Object.keys(this.new_date_json).length === 0) {
          //新增时，初始化数据结构
          this.initAddDataJson(dataArray[0]);
        }
      }
    },
    initAddDataJson(dataArray) {
      //新增时，初始化数据结构
      var dataJson = dataArray;
      var newDateJson = {};
      for (var key in dataJson) {
        if (key === "edit") {
          newDateJson[key] = "true";
        } else {
          newDateJson[key] = "";
        }
      }
      newDateJson["add"] = true;
      this.new_date_json = newDateJson;
    },
  },
  mounted: function () {
    this.initEditAttribute();
  },
  data() {
    return {
      addJsonForm: {
        params: [],
        addJsonRules: {
          name: [{ required: true, message: "请输入名称", trigger: "blur" }],
          address: [
            { required: true, message: "地址不能为空", trigger: "blur" },
          ],
        },
      },
      new_date_json: {}, //数据结构
      //表头信息
      table_columns: [
        {
          prop: "date",
          label: "日期",
          inputType: "obj",
          width: "150",
          request: true,
        },
        {
          prop: "name",
          label: "姓名",
          inputType: "str",
          width: "150",
          request: true,
        },
        {
          prop: "address",
          inputType: "str",
          label: "地址",
          width: "150",
          request: false,
        },
      ],
    };
  },
};
</script>
<style scoped>
</style>