VUE2.0表格el-table循环动态列渲染的demo,包含各种控件的必填校验(复杂表单)

<template>
  <el-form
    :model="tableForm"
    ref="tableForm"
    label-width="0px"
    class="demo_ruleForm"
  >
    <el-table
      :data="tableForm.tableData"
      :span-method="arraySpanMethod"
      style="width: 100%"
      :header-cell-style="headerCss"
    >
      <el-table-column label="序号" width="80px">
        <template slot-scope="{ row }">
          <!-- 编辑状态插入的控件 -->
          <div class="edit_box" v-if="row.isEdit">
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
          </div>
          <!-- 序号 -->
          <span style="padding-left: 24px" v-else>{{
            row["column1"].lineNo ? row["column1"].lineNo : ""
          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-for="(column, index) in subTableModel"
        :key="index"
        :prop="'column' + column.columnNo"
        :label="column.name"
      >
        <template slot-scope="scope">
          <!-- 文本类型 -->
          <span
            v-if="
              scope.row['column' + column.columnNo].controlType === 'text' &&
              !scope.row.isEdit
            "
          >
            {{ scope.row["column" + column.columnNo].value }}
          </span>
          <!-- 输入框类型 (有必填校验)-->
          <el-form-item
            v-if="scope.row['column' + column.columnNo].controlType === 'input'"
            :prop="
              'tableData.' +
              scope.$index +
              `.${['column' + column.columnNo]}.value`
            "
            :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
          >
            <el-input
              size="small"
              style="width: 85%"
              v-model="scope.row['column' + column.columnNo].value"
            ></el-input>
          </el-form-item>

          <!-- 多行文本类型 -->
          <el-form-item
            v-if="
              scope.row['column' + column.columnNo].controlType === 'textarea'
            "
            :prop="
              'tableData.' +
              scope.$index +
              `.${['column' + column.columnNo]}.value`
            "
            :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
          >
            <el-input
              type="textarea"
              size="small"
              style="width: 85%"
              v-model="scope.row['column' + column.columnNo].value"
            ></el-input>
          </el-form-item>

          <!-- radio单选类型 -->
          <el-form-item
            v-if="scope.row['column' + column.columnNo].controlType === 'radio'"
            :prop="
              'tableData.' +
              scope.$index +
              `.${['column' + column.columnNo]}.value`
            "
            :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
          >
            <el-radio-group
              class="radio_group"
              v-model="scope.row['column' + column.columnNo].value"
            >
              <el-radio
                v-for="item in options"
                :key="item.value"
                style="height: 25px; line-height: 25px"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>

          <!-- checkbox多选类型 -->
          <el-form-item
            v-if="
              scope.row['column' + column.columnNo].controlType === 'checkbox'
            "
            :prop="
              'tableData.' +
              scope.$index +
              `.${['column' + column.columnNo]}.value`
            "
            :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
          >
            <el-checkbox-group
              class="checkbox_group"
              v-model="scope.row['column' + column.columnNo].value"
            >
              <el-checkbox
                v-for="item in options"
                :key="item.value"
                :label="item.value"
                style="height: 25px; line-height: 25px"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>

          <!-- 单选下拉类型 (有必填校验)-->
          <el-form-item
            v-if="
              scope.row['column' + column.columnNo].controlType === 'select'
            "
            :prop="
              'tableData.' +
              scope.$index +
              `.${['column' + column.columnNo]}.value`
            "
            :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
          >
            <el-select
              size="small"
              v-model="scope.row['column' + column.columnNo].value"
              placeholder="请选择"
              style="width: 85%"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 多选下拉类型 (有必填校验)-->
          <el-form-item
            v-if="
              scope.row['column' + column.columnNo].controlType ===
              'multi-select'
            "
            :prop="
              'tableData.' +
              scope.$index +
              `.${['column' + column.columnNo]}.value`
            "
            :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
          >
            <el-select
              size="small"
              multiple
              v-model="scope.row['column' + column.columnNo].value"
              placeholder="请选择"
              style="width: 85%"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 时间类型 (有必填校验)-->
          <el-form-item
            v-if="scope.row['column' + column.columnNo].controlType === 'time'"
            :prop="
              'tableData.' +
              scope.$index +
              `.${['column' + column.columnNo]}.value`
            "
            :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
          >
            <el-date-picker
              v-model="scope.row['column' + column.columnNo].value"
              type="datetime"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
              style="width: 85%"
            >
            </el-date-picker>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="submitRowForm('tableForm', scope.$index, subTableModel)"
            >校验表格每一行</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="submitForm('tableForm')"
            >校验整个表格</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      checked: "",
      options: [
        {
          value: "1",
          label: "黄金糕",
        },
        {
          value: "2",
          label: "双皮奶",
        },
        {
          value: "3",
          label: "蚵仔煎",
        },
        {
          value: "4",
          label: "龙须面",
        },
        {
          value: "5",
          label: "北京烤鸭",
        },
      ],
      subTableModel: [
        { name: "text类型", columnNo: 0 },
        { name: "input类型", columnNo: 1 },
        { name: "textarea类型", columnNo: 2 },
        { name: "radio类型", columnNo: 3 },
        { name: "checkbox类型", columnNo: 4 },
        { name: "select类型", columnNo: 5 },
        { name: "multi-select类型", columnNo: 6 },
        { name: "time类型", columnNo: 7 },
      ],
      subTableList: [
        [
          { lineNo: 1, columnNo: 0, controlType: "text", value: "白细胞" },
          {
            lineNo: 1,
            columnNo: 1,
            controlType: "input",
            value: "",
          },
          {
            lineNo: 1,
            columnNo: 2,
            controlType: "textarea",
            value: "文本框类型1",
          },
          { lineNo: 1, columnNo: 3, controlType: "radio", value: "2" },
          { lineNo: 1, columnNo: 4, controlType: "checkbox", value: "1" },
          { lineNo: 1, columnNo: 5, controlType: "select", value: "3" },
          { lineNo: 1, columnNo: 6, controlType: "multi-select", value: "4" },
          {
            lineNo: 1,
            columnNo: 7,
            controlType: "time",
            value: "2023-04-12 18:00:38",
          },
        ],
        [
          { lineNo: 2, columnNo: 0, controlType: "text", value: "黑细胞" },
          {
            lineNo: 2,
            columnNo: 1,
            controlType: "input",
            value: "输入框类型2",
          },
          {
            lineNo: 2,
            columnNo: 2,
            controlType: "textarea",
            value: "文本框类型2",
          },
          { lineNo: 2, columnNo: 3, controlType: "radio", value: "3" },
          { lineNo: 2, columnNo: 4, controlType: "checkbox", value: "2" },
          { lineNo: 2, columnNo: 5, controlType: "select", value: "4" },
          { lineNo: 2, columnNo: 6, controlType: "multi-select", value: "1" },
          { lineNo: 2, columnNo: 7, controlType: "time", value: "" },
        ],
      ],
    };
  },
  computed: {
    tableForm() {
      const tableForm = {};
      const tableData = this.subTableList.map((row) => {
        // 处理每行的数据格式
        let rowData = {};
        row.forEach((column) => {
          if (
            column.controlType === "checkbox" ||
            column.controlType === "multi-select"
          ) {
            //将字符串转为数组
            column.value = Object.values(column.value);
          }
          rowData["column" + column.columnNo] = column;
        });
        this.$set(rowData, "iskkkk", false);
        return rowData;
      });
      // 返回一个处理好的列表
      this.$set(tableForm, "tableData", tableData);
      return tableForm;
    },
  },
  methods: {
    // 表格头部样式
    headerCss() {
      const headerStyle =
        "background:#F2F2F2; color:#333333;border-left: 2px solid #FFFFFF;";
      return headerStyle;
    },
    // 点击修改时,插入一行,并且合并所有的行div
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.isEdit) {
        if (columnIndex === 0) {
          const headerNum = this.subTableModel.length + 2;
          return [1, headerNum];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },
    // 校验整个表格
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 校验表格每一行,并保存
    submitRowForm(formName, index, subTableModel) {
      const errorList = [];
      subTableModel.forEach((item) => {
        const value =
          "tableData." + index + `.${["column" + item.columnNo]}.value`;
        this.$refs[formName].validateField(value, (errorMessage) => {
          errorList.push(errorMessage);
        });
      });
      // 全部为空的时候(校验通过,可以进行下一步操作)
      if (errorList.every((erro) => erro === "")) {
        console.log("可以保存了");
      } else {
        console.log("不能保存!");
      }
    },

    handleOpearate(row, index) {
      if (row.iskkkk) {
        row.iskkkk = false;
        this.tableForm.tableData.splice(index + 1, 1);
      } else {
        row.iskkkk = true;
        const newRow = JSON.parse(JSON.stringify(row));
        this.$set(newRow, "isEdit", true);
        this.tableForm.tableData.splice(index + 1, 0, newRow);
        console.log(newRow, index);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.demo_ruleForm {
  ::v-deep .el-form-item {
    margin: 22px 0;
  }
  ::v-deep .el-table td {
    position: relative;
  }
  ::v-deep .el-table th > .cell {
    padding-left: 24px;
  }
  .header_img {
    float: right;
    padding-right: 10px;
    img {
      cursor: pointer;
      margin: 0 4px;
    }
  }
  .checkbox_group,
  .radio_group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 90%;
  }

  .edit_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: aquamarine;
  }

  .operate_box {
    display: flex;
    justify-content: space-between;
    .edit_but_box {
      display: flex;
      .operation_img {
        width: 26px;
        height: 26px;
        margin-right: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 16px;
          height: 16px;
        }
        &:hover {
          border-radius: 3px;
          background-color: #e6e5e3;
        }
      }
    }
    .checkbox_box {
      padding-right: 10px;
      ::v-deep.el-checkbox__inner {
        width: 16px;
        height: 16px;
      }
      ::v-deep.el-checkbox__inner::after {
        left: 5px;
        top: 2px;
      }
    }
  }
}
</style>