npmapps 1.2.0 → 1.3.1

package/app/wujie-wk/wujie-vue2-child/src/views/element/elTableJsx/elTableJsx.vue

@@ -1,1826 +0,0 @@
-<script>
-import _ from "lodash";
-import columnManagement from "./columnManagement.vue";
-export default {
-  components: {
-    columnManagement,
-  },
-  props: {
-    columns: {
-      type: Array,
-      default: () => [],
-    },
-    tableData: {
-      type: Array,
-      default: () => [],
-    },
-    // 是否显示表头
-    showHeader: {
-      type: Boolean,
-      default: true,
-    },
-    // 是否显示工具按钮
-    showColumnSettings: {
-      type: Boolean,
-      default: true,
-    },
-    // 是否显示密度切换按钮
-    showDensity: {
-      type: Boolean,
-      default: true,
-    },
-    size: {
-      type: String,
-      default: "medium",
-    },
-    formOptions: {
-      type: Object,
-      default: () => ({
-        show: false,
-        props: {},
-      }),
-    },
-  },
-  data() {
-    return {
-      __columns: [],
-      __tableData: [],
-      visible: false,
-      tableSize: this.size,
-      timeKey: 0,
-      __tableForm: {
-        data: this.__tableData,
-      },
-    };
-  },
-  watch: {
-    columns: {
-      handler(val) {
-        if (!val) return;
-        this.__columns = _.cloneDeep(val);
-      },
-      immediate: true,
-    },
-    tableData: {
-      handler(val) {
-        if (!val || !val.length) return;
-        console.log(val.length, "val");
-        this.__tableData = _.cloneDeep(val);
-        this.__tableForm = {
-          data: this.__tableData,
-        };
-        console.log(this.__tableForm, "this.__tableForm");
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    getData() {
-      return {
-        formData: this.__tableForm,
-        columns: this.__columns,
-        tableData: this.__tableData,
-        formRef: this.$refs.elForm,
-      };
-    },
-    handleColumnSlot(column) {
-      if (!column) return;
-      if (column.children) {
-        return column.children.map((item) => {
-          return (
-            <el-table-column
-              key={item.key}
-              label={item.label}
-              prop={item.key}
-              props={{ ...item.props }}
-              on={{ ...item.on }}
-              scopedSlots={this.handleColumnSlot(item)}
-            >
-              {this.handleColumnSlot(item)}
-            </el-table-column>
-          );
-        });
-      }
-      if (column.input) {
-        return this.handleColumnInput(column);
-      }
-      if (column.slots) {
-        return column.slots;
-      }
-    },
-    handleColumnShow(row, column, input, show) {
-      if (input.delayedShutdown || (!input.delayedShutdown && this.formOptions.delayedShutdown)) {
-        const timeout = input.delayedShutdown || this.formOptions.delayedShutdown || 0;
-        console.log("delayedShutdown", timeout);
-
-        setTimeout(() => {
-          this.$set(row, `${column.key}ShowByTableJsx`, show);
-        }, timeout);
-        return;
-      };
-      this.$set(row, `${column.key}ShowByTableJsx`, show);
-    },
-    handleColumnInput(column) {
-      const slots = column.slots || {};
-      const inputEnum = {
-        text: (column, input) => {
-          return {
-            default: ({ $index, row }) => {
-              // console.log($index, row,column, "item");
-              // 显示输入框
-              if (
-                input.showInputType === "always" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "always")
-              ) {
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-input
-                    style={{ width: "100%" }}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                    />
-                  </el-form-item>
-                );
-              } else if (
-                input.showInputType === "click" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "click")
-              ) {
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-input
-                    style={{ width: "100%" }}
-                      ref={(ref) => (row[`${column.key}RefByTableJsx`] = ref)}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        blur: (e) => {
-                          if (input.rules && input.rules.length) {
-                            console.log(
-                              "validateField",
-                              this.$refs.elForm,
-                              this.$refs
-                            );
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.blur)
-                                    input.on.blur(e);
-                                }
-                              }
-                            );
-                          } else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.blur) input.on.blur(e);
-                          }
-                        },
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    />
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onClick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        });
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                );
-              } else if (
-                input.showInputType === "doubleClick" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "doubleClick")
-              ) {
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-input
-                      style={{ width: "100%" }}
-                      ref={(ref) => (row[`${column.key}RefByTableJsx`] = ref)}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        blur: (e) => {
-                          if (input.rules && input.rules.length) {
-                            console.log(
-                              "validateField",
-                              this.$refs.elForm,
-                              this.$refs
-                            );
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.blur)
-                                    input.on.blur(e);
-                                }
-                              }
-                            );
-                          } else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.blur) input.on.blur(e);
-                          }
-                        },
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    ></el-input>
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onDblclick={() => {
-                        console.log("doubleClick");
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        });
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                );
-              }
-            },
-            
-            header: ({ $index, row }) => {
-                return slots.header
-                ? slots.header({
-                    $index,
-                    row,
-                    column,
-                    input,
-                  })
-                : column.label;
-            }
-          };
-        },
-        select: (column, input) => {
-          return {
-            default: ({ $index, row }) => {
-              // console.log($index, row,column, "item");
-              // 显示输入框
-              if (
-                input.showInputType === "always" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "always") // 总是显示
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-select
-                      style={{ width: "100%" }}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                    >
-                      {input.options.map((item) => {
-                        return (
-                          <el-option
-                            key={item.value}
-                            label={item.label}
-                            value={item.value}
-                          />
-                        );
-                      })}
-                    </el-select>
-                  </el-form-item>
-                );
-              else if (
-                input.showInputType === "click" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "click") // 点击显示
-              ) {
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-select
-                    style={{ width: "100%" }}
-                      ref={(ref) => (row[`${column.key}RefByTableJsx`] = ref)}
-                      size={this.tableSize}
-                      v-model={row[column.key]} // 绑定v-model
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        "visible-change": (e) => {
-                          console.log("visible-change", e);
-                          if (e) return;
-                          if (input.rules && input.rules.length) {
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on["visible-change"])
-                                    input.on["visible-change"](e);
-                                }
-                              }
-                            );
-                          } else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on["visible-change"])
-                              input.on["visible-change"](e);
-                          }
-                        },
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    >
-                      {input.options.map((item) => {
-                        return (
-                          <el-option
-                            key={item.value}
-                            label={item.label}
-                            value={item.value}
-                          />
-                        );
-                      })}
-                    </el-select>
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onClick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        });
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                );
-              } else if (
-                input.showInputType === "doubleClick" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "doubleClick")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-select
-                    style={{ width: "100%" }}
-                      ref={(ref) => (row[`${column.key}RefByTableJsx`] = ref)}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        "visible-change": (e) => {
-                          if (e) return;
-                          if (input.rules && input.rules.length) {
-                            console.log(
-                              "validateField",
-                              this.$refs.elForm,
-                              this.$refs
-                            );
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on["visible-change"])
-                                    input.on["visible-change"](e);
-                                }
-                              }
-                            );
-                          } else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on["visible-change"])
-                              input.on["visible-change"](e);
-                          }
-                        },
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    >
-                      {input.options.map((item) => {
-                        return (
-                          <el-option
-                            key={item.value}
-                            label={item.label}
-                            value={item.value}
-                          />
-                        );
-                      })}
-                    </el-select>
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onDblclick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        });
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                );
-            },
-            header: ({ $index, row }) => {
-                return slots.header
-                ? slots.header({
-                    $index,
-                    row,
-                    column,
-                    input,
-                  })
-                : column.label;
-            }
-          };
-        },
-        number: (column, input) => {
-          return {
-            default: ({ $index, row }) => {
-              // console.log($index, row,column, "item");
-              // 显示输入框
-              if (
-                input.showInputType === "always" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "always")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-input-number
-                    style={{ width: "100%" }}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                    />
-                  </el-form-item>
-                );
-              else if (
-                input.showInputType === "click" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "click")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-input-number
-                      style={{ width: "100%" }}
-                      ref={(ref) => (row[`${column.key}RefByTableJsx`] = ref)}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        blur: (e) => {
-                          if (input.rules && input.rules.length) {
-                            console.log(
-                              "validateField",
-                              this.$refs.elForm,
-                              this.$refs
-                            );
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.blur)
-                                    input.on.blur(e);
-                                }
-                              }
-                            );
-                          } else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.blur) input.on.blur(e);
-                          }
-                        },
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    />
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onClick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        });
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                );
-              else if (
-                input.showInputType === "doubleClick" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "doubleClick")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-input-number
-                      style={{ width: "100%" }}
-                      ref={(ref) => (row[`${column.key}RefByTableJsx`] = ref)}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        blur: (e) => {
-                          if (input.rules && input.rules.length) {
-                            console.log(
-                              "validateField",
-                              this.$refs.elForm,
-                              this.$refs
-                            );
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.blur)
-                                    input.on.blur(e);
-                                }
-                              }
-                            );
-                          } else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.blur) input.on.blur(e);
-                          }
-                        },
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    />
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onDblclick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        });
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                );
-            },
-            header: ({ $index, row }) => {
-                return slots.header
-                ? slots.header({
-                    $index,
-                    row,
-                    column,
-                    input,
-                  })
-                : column.label;
-            }
-          };
-        },
-        switch: (column, input) => {
-          return {
-            default: ({ $index, row }) => {
-              // console.log($index, row,column, "item");
-              // 显示输入框
-              if (
-                input.showInputType === "always" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "always")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-switch
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-
-                        }
-                      }}
-                    />
-                  </el-form-item>
-                )
-              else if (
-                input.showInputType === "click" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "click")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-
-                    <el-switch
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.rules && input.rules.length) {
-                            console.log(
-                              "validateField",
-                              this.$refs.elForm,
-                              this.$refs
-                            );
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.change)
-                                    input.on.change({
-                                      e,
-                                      row,
-                                      column,
-                                      $index,
-                                      input,
-                                      vm: this,
-                                    });
-                                }
-                              }
-                            )
-                          }
-                          else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.change) input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            });
-                          }
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    />
-
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onClick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        {/* if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        }); */}
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                )
-              else if (
-                input.showInputType === "doubleClick" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "doubleClick")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-switch
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.rules && input.rules.length) {
-                            console.log(
-                              "validateField",
-                              this.$refs.elForm,
-                              this.$refs
-                            );
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.change)
-                                    input.on.change({
-                                      e,
-                                      row,
-                                      column,
-                                      $index,
-                                      input,
-                                      vm: this,
-                                    });
-                                }
-                              }
-                            )
-                          }
-                          else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.change) input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            });
-                          }
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    />
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onDblclick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        {/* if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        }); */}
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                )
-            },
-            header: ({ $index, row }) => {
-                return slots.header
-                ? slots.header({
-                    $index,
-                    row,
-                    column,
-                    input,
-                  })
-                : column.label;
-            }
-          }
-        },
-        slider: (column, input) => {
-          return {
-            default: ({ $index, row }) => {
-              // console.log($index, row,column, "item");
-              // 显示输入框
-              if (
-                input.showInputType === "always" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "always")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-slider
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                    />
-                  </el-form-item>
-                )
-              else if (
-                input.showInputType === "click" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "click")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-slider
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.rules && input.rules.length) {
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.change)
-                                    input.on.change({
-                                      e,
-                                      row,
-                                      column,
-                                      $index,
-                                      input,
-                                      vm: this,
-                                    });
-                                }
-                              }
-                            )
-                          }
-                          else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.change) input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            });
-                          }
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    />
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onClick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        {/* if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        }); */}
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                )
-              else if (
-                input.showInputType === "doubleClick" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "doubleClick")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-slider
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.rules && input.rules.length) {
-                            console.log(
-                              "validateField",
-                              this.$refs.elForm,
-                              this.$refs
-                            );
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.change)
-                                    input.on.change({
-                                      e,
-                                      row,
-                                      column,
-                                      $index,
-                                      input,
-                                      vm: this,
-                                    });
-                                }
-                              }
-                            )
-                          }
-                          else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.change) input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            });
-                          }
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    />
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onDblclick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        {/* if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        }); */}
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                )
-            },
-            header: ({ $index, row }) => {
-                return slots.header
-                ? slots.header({
-                    $index,
-                    row,
-                    column,
-                    input,
-                  })
-                : column.label;
-            }
-          }
-        },
-        'time-picker': (column, input) => {
-          return {
-            default: ({ $index, row }) => {
-              // console.log($index, row,column, "item");
-              // 显示输入框
-              if (
-                input.showInputType === "always" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "always")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-time-picker
-                      style={{ width: "100%" }}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                    />
-                  </el-form-item>
-                )
-              else if (
-                input.showInputType === "click" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "click")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-time-picker
-                      style={{ width: "100%" }}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.rules && input.rules.length) {
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.change)
-                                    input.on.change({
-                                      e,
-                                      row,
-                                      column,
-                                      $index,
-                                      input,
-                                      vm: this,
-                                    });
-                                }
-
-                              }
-
-                            )
-                          }
-                          else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.change) input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            });
-                          }
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    />
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onClick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        {/* if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )}
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        }); */}
-
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                )
-              else if (
-                input.showInputType === "doubleClick" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "doubleClick")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-time-picker
-                      style={{ width: "100%" }}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.rules && input.rules.length) {
-                            console.log(
-                              "validateField",
-                              this.$refs.elForm,
-                              this.$refs
-                            );
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.change)
-                                    input.on.change({
-                                      e,
-                                      row,
-                                      column,
-                                      $index,
-                                      input,
-                                      vm: this,
-                                    });
-                                }
-
-                              }
-
-                            )
-
-                          }
-                          else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.change) input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            });
-                          }
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    />
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onDblclick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        {/* if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs 
-                        )}
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        }); */}
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                )
-            },
-            header: ({ $index, row }) => {
-                return slots.header
-                ? slots.header({
-                    $index,
-                    row,
-                    column,
-                    input,
-                  })
-                : column.label;
-            }
-          }
-        },
-        'date-picker': (column, input) => {
-          return {
-            default: ({ $index, row }) => {
-              // console.log($index, row,column, "item");
-              // 显示输入框 
-              if (
-                input.showInputType === "always" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "always")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-date-picker
-                      style={{ width: "100%" }}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.on && input.on.change)
-                            input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                        }
-                      }}
-                    />
-                  </el-form-item>
-                )
-              else if (
-                input.showInputType === "click" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "click")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-date-picker
-                      style={{ width: "100%" }}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.rules && input.rules.length) {
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.change)
-                                    input.on.change({
-                                      e,
-                                      row,
-                                      column,
-                                      $index,
-                                      input,
-                                      vm: this,
-                                    });
-                                }
-                              }
-                            )
-                          }
-                          else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.change) input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            });
-                          }
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    />
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onClick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        {/* if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs 
-                        )}
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        }); */}
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                )
-              else if (
-                input.showInputType === "doubleClick" ||
-                (!input.showInputType &&
-                  this.formOptions.showInputType === "doubleClick")
-              )
-                return (
-                  <el-form-item
-                    prop={`data[${$index}].${column.key}`}
-                    rules={input.rules}
-                  >
-                    <el-date-picker
-                      style={{ width: "100%" }}
-                      size={this.tableSize}
-                      v-model={row[column.key]}
-                      props={{ ...input.props }}
-                      on={{
-                        ...input.on,
-                        change: (e) => {
-                          if (input.rules && input.rules.length) {
-                            console.log(
-                              "validateField",
-                              this.$refs.elForm,
-                              this.$refs
-                            )
-                            this.$refs.elForm.validateField(
-                              `data[${$index}].${column.key}`,
-                              (err) => {
-                                if (!err) {
-                                  this.handleColumnShow(row, column, input, false)
-                                  if (input.on && input.on.change)
-                                    input.on.change({
-                                      e,
-                                      row,
-                                      column,
-                                      $index,
-                                      input,
-                                      vm: this,
-                                    });
-                                }
-                              }
-                            )
-                          }
-                          else {
-                            this.handleColumnShow(row, column, input, false)
-                            if (input.on && input.on.change) input.on.change({
-                              e,
-                              row,
-                              column,
-                              $index,
-                              input,
-                              vm: this,
-                            })
-                          }
-                        }
-                      }}
-                      v-show={row[`${column.key}ShowByTableJsx`]}
-                    />
-                    <div
-                      v-show={!row[`${column.key}ShowByTableJsx`]}
-                      onDblclick={() => {
-                        this.$set(row, `${column.key}ShowByTableJsx`, true);
-                        {/* if (
-                          input.columnOptions &&
-                          input.columnOptions.clickInputNoFoucs
-                        )}
-                          return;
-                        this.$nextTick(() => {
-                          row[`${column.key}RefByTableJsx`].focus();
-                        }); */}
-                      }}
-                    >
-                      {input.columnOptions && input.columnOptions.formatter
-                        ? input.columnOptions.formatter({
-                          row,
-                          column,
-                          $index,
-                          input,
-                        })
-                        : row[column.key] || <i class="el-icon-edit"></i>}
-                    </div>
-                  </el-form-item>
-                )
-            },
-            header: ({ $index, row }) => {
-                return slots.header
-                ? slots.header({
-                    $index,
-                    row,
-                    column,
-                    input,
-                  })
-                : column.label;
-            }
-          }
-        },
-        customize: (column, input) => {
-          return {
-            default: ({ $index, row }) => {
-              return input.slotFn &&
-                input.slotFn({
-                  $index,
-                  row,
-                  column,
-                  input,
-                  vm: this
-                });
-            },
-            header: ({ $index, row }) => {
-                return slots.header
-                ? slots.header({
-                    $index,
-                    row,
-                    column,
-                    input,
-                  })
-                : column.label;
-            }
-          }
-        }
-      };
-      const input = column.input;
-      return inputEnum[input.type] && inputEnum[input.type](column, input);
-    },
-    dropdownCommand(v) {
-      console.log(v);
-      this.tableSize = v;
-    },
-    updateView() {
-      this.timeKey = Date.now();
-    },
-    spliceTableData(index, removeCount, ...items) {
-      this.__tableData.splice(index, removeCount, ...items);
-      this.updateView();
-    },
-
-    renderTable() {
-      return (
-        <el-table
-          key={this.timeKey}
-          ref="elTableJsx"
-          data={this.__tableData}
-          props={{ ...this.$attrs, size: this.tableSize }}
-          on={{ ...this.$listeners }}
-        >
-          {this.__columns.map((item) => {
-            return (
-              !item.hide && (
-                <el-table-column
-                  key={item.key}
-                  label={item.label}
-                  prop={item.key}
-                  props={{ ...item.props }}
-                  on={{ ...item.on }}
-                  scopedSlots={this.handleColumnSlot(item)}
-                >
-                  {this.handleColumnSlot(item)}
-                </el-table-column>
-              )
-            );
-          })}
-        </el-table>
-      );
-    },
-  },
-  render() {
-    console.log("render");
-    return (
-      <div class="elTableJsx">
-        {this.showHeader && (
-          <div class="header">
-            <div class="header-left">{this.$slots["header-left"]}</div>
-            <div class="header-right">
-              {this.$slots["header-right"]}
-              {this.showDensity && (
-                <el-dropdown trigger="click" onCommand={this.dropdownCommand}>
-                  <el-tooltip
-                    class="item"
-                    effect="dark"
-                    content="表格密度"
-                    placement="top"
-                  >
-                    <i class="el-icon-d-caret icon-tool"></i>
-                  </el-tooltip>
-
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item command="medium">宽松</el-dropdown-item>
-                    <el-dropdown-item command="small">中等</el-dropdown-item>
-                    <el-dropdown-item command="mini">紧凑</el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
-              )}
-              {this.showColumnSettings && (
-                <el-popover
-                  placement="top"
-                  width="300"
-                  value={this.visible}
-                  onShow={() => {
-                    this.visible = true;
-                  }}
-                  onHide={() => {
-                    this.visible = false;
-                    this.$refs.columnManagement1.dialogClose();
-                  }}
-                >
-                  {this.visible && (
-                    <columnManagement
-                      ref="columnManagement1"
-                      columns={this.__columns}
-                      setColumns={(v) => {
-                        this.__columns = v;
-                        this.timeKey = Date.now();
-                      }}
-                    />
-                  )}
-
-                  <template slot="reference">
-                    <el-tooltip
-                      class="item"
-                      effect="dark"
-                      content="表格列设置"
-                      placement="top"
-                    >
-                      <i class="el-icon-s-tools  icon-tool" />
-                    </el-tooltip>
-                  </template>
-                </el-popover>
-              )}
-            </div>
-          </div>
-        )}
-        {this.formOptions.show ? (
-          <el-form
-            ref="elForm"
-            props={{
-              ...this.formOptions.props,
-              model: this.__tableForm,
-            }}
-            on={{ ...this.formOptions.on }}
-          >
-            {this.renderTable()}
-          </el-form>
-        ) : (
-          this.renderTable()
-        )}
-      </div>
-    );
-  },
-};
-</script>
-
-<style lang="less">
-.elTableJsx {
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-
-    .header-left {
-      flex: 1;
-    }
-
-    .header-right {
-      flex: 1;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-
-      .icon-tool {
-        font-size: 16px;
-        margin-left: 10px;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .el-table__row {
-    .el-form-item {
-      margin-bottom: 0;
-      // .el-form-item__content{
-      //   .el-form-item__error{
-      //     top: 50%;
-      //     transform: translateY(-50%);
-      //     left: 10px;
-      //   }
-      // }
-    }
-
-    .el-form-item.is-error {
-      padding-top: 0;
-      margin-bottom: 16px;
-    }
-  }
-}
-</style>