npmapps 1.0.25 → 1.0.26

package/app/src/views/element/elTableJsx/elTableJsx.vue

@@ -0,0 +1,1826 @@
+<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>