eoss-ui 0.6.45 → 0.6.47

package/packages/form/src/table.vue

@@ -1,1420 +1,1426 @@
-<template>
-  <div>
-    <table
-      class="es-table-form"
-      border="1"
-      cellspacing="0"
-      cellpadding="0"
-      v-if="content.length"
-    >
-      <colgroup>
-        <template v-for="(item, index) in cols">
-          <col :width="labelWidth" :key="'label' + index" />
-          <col :width="item" :key="index" />
-        </template>
-      </colgroup>
-      <caption v-if="caption" class="es-table-caption">
-        {{
-          caption
-        }}
-      </caption>
-      <tbody>
-        <tr v-for="(items, indexs) in content" :key="indexs">
-          <template v-for="(item, index) in items">
-            <td
-              v-if="item.type === 'caption'"
-              :colspan="col * 2"
-              class="es-table-td-caption"
-            >
-              <div class="es-table-caption">{{ item.text }}</div>
-            </td>
-            <td
-              v-else-if="item.type === 'table'"
-              :colspan="col * 2"
-              class="es-table-form-data"
-            >
-              <es-data-table-form
-                v-if="item.lazy"
-                class="es-form-table-data"
-                :data="model[item.name]"
-                :full="false"
-                v-bind="item"
-                :readonly="readonly ? readonly : item.readonly"
-                @blur="
-                  (val, data) => {
-                    handleBlur(item, val, data);
-                  }
-                "
-                @focus="
-                  (val, data) => {
-                    handleFocus(item, val, data);
-                  }
-                "
-                @edit="
-                  (val, data) => {
-                    handleChange(item, val, data);
-                  }
-                "
-                @btnClick="handleClick"
-                @dataChange="handleDataChange"
-              >
-              </es-data-table-form>
-              <es-data-table
-                v-else
-                class="es-form-item-table"
-                ref="dataTable"
-                :data="model[item.name]"
-                :full="false"
-                v-bind="
-                  handleExclAttribute({
-                    data: item,
-                    attrs: ['value', 'events']
-                  })
-                "
-                v-on="item.events"
-                :readonly="readonly ? readonly : item.readonly"
-                @blur="
-                  (val, data) => {
-                    handleBlur(item, val, data);
-                  }
-                "
-                @focus="
-                  (val, data) => {
-                    handleFocus(item, val, data);
-                  }
-                "
-                @edit="
-                  (val, data) => {
-                    handleChange(item, val, data);
-                  }
-                "
-                @btnClick="handleClick"
-                @dataChange="handleDataChange"
-              >
-              </es-data-table>
-            </td>
-            <template v-else>
-              <td
-                v-if="item.label !== false && item.hide !== true"
-                class="es-table-form-label"
-                :class="{
-                  'es-align-middle': item.labelRow,
-                  'is-required':
-                    item.rules && item.rules.required && !hideRequiredAsterisk,
-                  'required-after': after
-                }"
-                :key="'label' + index"
-                :align="item.type === 'label' ? item.align : ''"
-                :colspan="
-                  item.labelCol
-                    ? item.labelCol
-                    : item.type === 'label'
-                    ? item.colspan
-                    : ''
-                "
-                :rowspan="item.labelRow"
-              >
-                <es-label
-                  v-if="item.showLabel !== false && item.label"
-                  v-bind="getLabel(item.label)"
-                ></es-label>
-              </td>
-              <td
-                v-if="
-                  item.type !== 'label' &&
-                  !(item.type === 'empty' && item.labelRow) &&
-                  item.hide !== true
-                "
-                :align="
-                  item.type === 'label' || item.type === 'empty'
-                    ? item.align
-                    : ''
-                "
-                :class="
-                  item.type === 'label' || item.type === 'empty'
-                    ? 'es-table-form-label'
-                    : item.disabled
-                    ? 'es-table-form-item td-disabled'
-                    : 'es-table-form-item'
-                "
-                :key="index"
-                :colspan="
-                  item.colspan
-                    ? item.colspan
-                    : item.colspan !== false && items.length < col
-                    ? col * 2 - items.length
-                    : item.label === false
-                    ? 2
-                    : ''
-                "
-                :rowspan="item.rowspan"
-              >
-                <expand-dom
-                  v-if="item.render"
-                  :item="item"
-                  :model="models"
-                  :render="item.render"
-                ></expand-dom>
-                <template v-else>
-                  <es-label
-                    v-if="
-                      (item.type === 'label' || item.type === 'empty') &&
-                      !item.hide
-                    "
-                    :contents="item.text"
-                    v-bind="{
-                      event: item.event,
-                      events: item.events
-                    }"
-                  ></es-label>
-                  <el-form-item
-                    v-else-if="!item.hide"
-                    label-width="0"
-                    :prop="item.name"
-                    :rules="getRules(item)"
-                    :class="{
-                      'es-form-item-inline': item.inline
-                    }"
-                  >
-                    <es-input-number
-                      v-if="item.type == 'number'"
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: 'label'
-                        })
-                      "
-                      v-model="model[item.name]"
-                      :plain="item.plain"
-                      :readonly="readonly ? readonly : item.readonly"
-                      @blur="
-                        (event) => {
-                          handleBlur(item, event);
-                        }
-                      "
-                      @focus="
-                        (event) => {
-                          handleFocus(item, event);
-                        }
-                      "
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                    ></es-input-number>
-                    <es-radio-group
-                      v-else-if="item.type == 'radio'"
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: 'label'
-                        })
-                      "
-                      v-model="model[item.name]"
-                      :plain="item.plain"
-                      :readonly="readonly ? readonly : item.readonly"
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                    ></es-radio-group>
-                    <es-checkbox-group
-                      v-else-if="item.type == 'checkbox'"
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: 'label'
-                        })
-                      "
-                      v-model="model[item.name]"
-                      :plain="item.plain"
-                      :readonly="readonly ? readonly : item.readonly"
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                    ></es-checkbox-group>
-                    <es-select
-                      v-else-if="item.type == 'select'"
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: 'label'
-                        })
-                      "
-                      v-model="model[item.name]"
-                      :plain="item.plain"
-                      :readonly="readonly ? readonly : item.readonly"
-                      @blur="
-                        (event) => {
-                          handleBlur(item, event);
-                        }
-                      "
-                      @focus="
-                        (event) => {
-                          handleFocus(item, event);
-                        }
-                      "
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                    ></es-select>
-                    <es-cascader
-                      v-else-if="item.type == 'cascader'"
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: 'label'
-                        })
-                      "
-                      v-model="model[item.name]"
-                      :plain="item.plain || item.name === undefined"
-                      :readonly="readonly ? readonly : item.readonly"
-                      @blur="
-                        (event) => {
-                          handleBlur(item, event);
-                        }
-                      "
-                      @focus="
-                        (event) => {
-                          handleFocus(item, event);
-                        }
-                      "
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                    >
-                    </es-cascader>
-                    <es-select-ganged
-                      v-else-if="
-                        item.type == 'ganged' ||
-                        (item.type == 'select' && item.ganged)
-                      "
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: 'label'
-                        })
-                      "
-                      v-model="model[item.name]"
-                      :plain="item.plain"
-                      :readonly="readonly ? readonly : item.readonly"
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                    ></es-select-ganged>
-                    <es-switch
-                      v-else-if="item.type == 'switch'"
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: 'label'
-                        })
-                      "
-                      v-model="model[item.name]"
-                      :plain="item.plain"
-                      :readonly="readonly ? readonly : item.readonly"
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                    ></es-switch>
-                    <es-date-picker
-                      v-else-if="
-                        item.date ||
-                        item.type == 'date' ||
-                        item.type == 'year' ||
-                        item.type == 'month' ||
-                        item.type == 'date' ||
-                        item.type == 'dates' ||
-                        item.type == 'week' ||
-                        item.type == 'datetime' ||
-                        item.type == 'datetimerange' ||
-                        item.type == 'daterange' ||
-                        item.type == 'monthrange' ||
-                        item.type == 'quarter' ||
-                        item.type == 'halfyear'
-                      "
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: 'label'
-                        })
-                      "
-                      v-model="model[item.name]"
-                      :plain="item.plain"
-                      :readonly="readonly ? readonly : item.readonly"
-                      @blur="
-                        (event) => {
-                          handleBlur(item, event);
-                        }
-                      "
-                      @focus="
-                        (event) => {
-                          handleFocus(item, event);
-                        }
-                      "
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                    ></es-date-picker>
-                    <es-upload
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: ['value', 'ownId']
-                        })
-                      "
-                      :ownId="item.ownId || models.id"
-                      v-model="model[item.name]"
-                      v-else-if="
-                        item.type == 'attachment' || item.type == 'upload'
-                      "
-                      :readonly="readonly ? readonly : item.readonly"
-                      :rules="item.rules"
-                      btnSize="small"
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                    ></es-upload>
-                    <es-selector
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: 'label'
-                        })
-                      "
-                      v-model="model[item.name]"
-                      v-else-if="item.type == 'selector'"
-                      :readonly="readonly ? readonly : item.readonly"
-                      :plain="item.plain"
-                      v-on="
-                        handleExclAttribute({
-                          data: item.events,
-                          attrs: 'change'
-                        })
-                      "
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                    ></es-selector>
-                    <es-icons
-                      v-else-if="item.type === 'icon'"
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: ['value']
-                        })
-                      "
-                      v-model="models[item.name]"
-                      :plain="item.plain || item.name === undefined"
-                      :readonly="readonly ? readonly : item.readonly"
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                    ></es-icons>
-                    <component
-                      v-else-if="item.type === 'component'"
-                      v-model="models[item.name]"
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: ['value']
-                        })
-                      "
-                      v-on="item.events"
-                    ></component>
-                    <es-input
-                      v-else
-                      v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: 'label'
-                        })
-                      "
-                      v-model="model[item.name]"
-                      :plain="item.plain"
-                      :readonly="readonly ? readonly : item.readonly"
-                      @blur="
-                        (event) => {
-                          handleBlur(item, event);
-                        }
-                      "
-                      @focus="
-                        (event) => {
-                          handleFocus(item, event);
-                        }
-                      "
-                      @change="
-                        (val) => {
-                          handleChange(item, val);
-                        }
-                      "
-                      @input="
-                        (val) => {
-                          handleInput(item, val);
-                        }
-                      "
-                      @clear="
-                        () => {
-                          handleClear(item);
-                        }
-                      "
-                    >
-                      <template v-if="item.prefix" slot="prefix">
-                        <expand-dom
-                          v-if="item.render"
-                          :item="item"
-                          :model="models"
-                          :render="item.render"
-                        ></expand-dom>
-                      </template>
-                      <template v-if="item.suffix" slot="suffix">
-                        <expand-dom
-                          v-if="item.render"
-                          :item="item"
-                          :model="models"
-                          :render="item.render"
-                        ></expand-dom>
-                      </template>
-                      <template v-if="item.prepend" slot="prepend">
-                        <expand-dom
-                          v-if="item.render"
-                          :item="item"
-                          :model="models"
-                          :render="item.render"
-                        ></expand-dom>
-                      </template>
-                      <template v-if="item.append" slot="append">
-                        <expand-dom
-                          v-if="item.render"
-                          :item="item"
-                          :model="models"
-                          :render="item.render"
-                        ></expand-dom>
-                      </template>
-                    </es-input>
-                    <template v-if="item.inline">
-                      <template v-if="Array.isArray(item.inline)">
-                        <template v-for="(inline, k) in item.inline">
-                          <es-button
-                            v-if="inline.type == 'button' && !inline.hide"
-                            class="es-button-inline"
-                            :disabled="isDisabled || inline.disabled"
-                            v-bind="
-                              handleExclAttribute({
-                                data: inline,
-                                attrs: ['disabled', 'type']
-                              })
-                            "
-                            @click="handleClick(inline)"
-                          ></es-button>
-                          <div
-                            v-else-if="!inline.hide"
-                            class="es-form-inline es-form-item-inline"
-                            :key="k"
-                          >
-                            <div class="es-range" v-if="inline.range !== false">
-                              —
-                            </div>
-                            <el-form-item
-                              label-width="0"
-                              :prop="inline.name"
-                              :rules="getRules(inline)"
-                            >
-                              <es-input-number
-                                v-if="inline.type == 'number'"
-                                v-bind="
-                                  handleExclAttribute({
-                                    data: inline,
-                                    attrs: ['value']
-                                  })
-                                "
-                                v-model="models[inline.name]"
-                                :plain="
-                                  inline.plain || inline.name === undefined
-                                "
-                                :readonly="
-                                  readonly ? readonly : inline.readonly
-                                "
-                                @blur="
-                                  (event) => {
-                                    handleBlur(inline, event);
-                                  }
-                                "
-                                @focus="
-                                  (event) => {
-                                    handleFocus(inline, event);
-                                  }
-                                "
-                                @change="
-                                  (val) => {
-                                    handleChange(inline, val);
-                                  }
-                                "
-                              ></es-input-number>
-                              <es-select
-                                v-else-if="inline.type == 'select'"
-                                v-bind="
-                                  handleExclAttribute({
-                                    data: inline,
-                                    attrs: ['value']
-                                  })
-                                "
-                                v-model="models[inline.name]"
-                                :plain="
-                                  inline.plain || inline.name === undefined
-                                "
-                                :readonly="
-                                  readonly ? readonly : inline.readonly
-                                "
-                                @blur="
-                                  (event) => {
-                                    handleBlur(inline, event);
-                                  }
-                                "
-                                @focus="
-                                  (event) => {
-                                    handleFocus(inline, event);
-                                  }
-                                "
-                                @change="
-                                  (val) => {
-                                    handleChange(inline, val);
-                                  }
-                                "
-                              ></es-select>
-                              <es-cascader
-                                v-else-if="inline.type == 'cascader'"
-                                v-bind="
-                                  handleExclAttribute({
-                                    data: inline,
-                                    attrs: ['value']
-                                  })
-                                "
-                                v-model="models[inline.name]"
-                                :plain="
-                                  inline.plain || inline.name === undefined
-                                "
-                                :readonly="
-                                  readonly ? readonly : inline.readonly
-                                "
-                                @blur="
-                                  (event) => {
-                                    handleBlur(inline, event);
-                                  }
-                                "
-                                @focus="
-                                  (event) => {
-                                    handleFocus(inline, event);
-                                  }
-                                "
-                                @change="
-                                  (val) => {
-                                    handleChange(inline, val);
-                                  }
-                                "
-                              >
-                              </es-cascader>
-                              <es-date-picker
-                                v-else-if="
-                                  inline.date ||
-                                  inline.type == 'date' ||
-                                  inline.type == 'year' ||
-                                  inline.type == 'month' ||
-                                  inline.type == 'date' ||
-                                  inline.type == 'dates' ||
-                                  inline.type == 'week' ||
-                                  inline.type == 'datetime' ||
-                                  inline.type == 'datetimerange' ||
-                                  inline.type == 'daterange' ||
-                                  inline.type == 'monthrange' ||
-                                  inline.type == 'quarter' ||
-                                  inline.type == 'halfyear'
-                                "
-                                v-bind="
-                                  handleExclAttribute({
-                                    data: inline,
-                                    attrs: ['value']
-                                  })
-                                "
-                                v-model="models[inline.name]"
-                                :plain="
-                                  inline.plain || inline.name === undefined
-                                "
-                                :readonly="
-                                  readonly ? readonly : inline.readonly
-                                "
-                                @blur="
-                                  (event) => {
-                                    handleBlur(inline, event);
-                                  }
-                                "
-                                @focus="
-                                  (event) => {
-                                    handleFocus(inline, event);
-                                  }
-                                "
-                                @change="
-                                  (val) => {
-                                    handleChange(inline, val);
-                                  }
-                                "
-                              ></es-date-picker>
-                              <template
-                                v-else-if="
-                                  inline.type == 'image' || inline.type == 'img'
-                                "
-                              >
-                                <img
-                                  v-if="inline.url || inline.src"
-                                  v-bind="
-                                    handleExclAttribute({
-                                      data: inline,
-                                      attrs: ['value']
-                                    })
-                                  "
-                                  height="100%"
-                                  :src="inline.url || inline.src"
-                                  @click="inline.event"
-                                />
-                              </template>
-                              <es-icons
-                                v-else-if="inline.type === 'icon'"
-                                v-bind="
-                                  handleExclAttribute({
-                                    data: inline,
-                                    attrs: ['value']
-                                  })
-                                "
-                                v-model="models[inline.name]"
-                                :plain="
-                                  inline.plain || inline.name === undefined
-                                "
-                                :readonly="
-                                  readonly ? readonly : inline.readonly
-                                "
-                                @change="
-                                  (val) => {
-                                    handleChange(inline, val);
-                                  }
-                                "
-                              ></es-icons>
-                              <component
-                                v-else-if="inline.type === 'component'"
-                                v-model="models[inline.name]"
-                                v-bind="
-                                  handleExclAttribute({
-                                    data: inline,
-                                    attrs: ['value']
-                                  })
-                                "
-                                v-on="inline.events"
-                              ></component>
-                              <es-input
-                                v-else
-                                v-bind="
-                                  handleExclAttribute({
-                                    data: inline,
-                                    attrs: ['value']
-                                  })
-                                "
-                                v-model="models[inline.name]"
-                                :plain="
-                                  inline.plain || inline.name === undefined
-                                "
-                                :readonly="
-                                  readonly ? readonly : inline.readonly
-                                "
-                                @blur="
-                                  (event) => {
-                                    handleBlur(inline, event);
-                                  }
-                                "
-                                @focus="
-                                  (event) => {
-                                    handleFocus(inline, event);
-                                  }
-                                "
-                                @input="
-                                  (val) => {
-                                    handleInput(inline, val);
-                                  }
-                                "
-                                @clear="handleClear(inline)"
-                                @change="
-                                  (val) => {
-                                    handleChange(inline, val);
-                                  }
-                                "
-                              ></es-input>
-                            </el-form-item>
-                          </div>
-                        </template>
-                      </template>
-                      <template v-else-if="!item.inline.hide">
-                        <div
-                          class="es-range"
-                          v-if="item.inline.range !== false"
-                        >
-                          —
-                        </div>
-                        <el-form-item
-                          label-width="0"
-                          :prop="item.inline.name"
-                          :rules="getRules(item.inline)"
-                        >
-                          <es-input-number
-                            v-if="item.inline.type == 'number'"
-                            v-bind="item.inline"
-                            v-model="models[item.inline.name]"
-                            :plain="
-                              item.inline.plain ||
-                              item.inline.name === undefined
-                            "
-                            :readonly="
-                              readonly ? readonly : item.inline.readonly
-                            "
-                            @blur="
-                              (event) => {
-                                handleBlur(item.inline, event);
-                              }
-                            "
-                            @focus="
-                              (event) => {
-                                handleFocus(item.inline, event);
-                              }
-                            "
-                            @change="
-                              (val) => {
-                                handleChange(item.inline, val);
-                              }
-                            "
-                          ></es-input-number>
-                          <es-select
-                            v-else-if="item.inline.type == 'select'"
-                            v-bind="
-                              handleExclAttribute({
-                                data: item,
-                                attrs: 'label'
-                              })
-                            "
-                            v-model="models[item.inline.name]"
-                            :plain="
-                              item.inline.plain ||
-                              item.inline.name === undefined
-                            "
-                            :readonly="
-                              readonly ? readonly : item.inline.readonly
-                            "
-                            @blur="
-                              (event) => {
-                                handleBlur(item.inline, event);
-                              }
-                            "
-                            @focus="
-                              (event) => {
-                                handleFocus(item.inline, event);
-                              }
-                            "
-                            @change="
-                              (val) => {
-                                handleChange(item.inline, val);
-                              }
-                            "
-                          ></es-select>
-                          <es-cascader
-                            v-else-if="item.inline.type == 'cascader'"
-                            v-bind="
-                              handleExclAttribute({
-                                data: item,
-                                attrs: 'label'
-                              })
-                            "
-                            v-model="models[item.inline.name]"
-                            :plain="
-                              item.inline.plain ||
-                              item.inline.name === undefined
-                            "
-                            :readonly="
-                              readonly ? readonly : item.inline.readonly
-                            "
-                            @blur="
-                              (event) => {
-                                handleBlur(item.inline, event);
-                              }
-                            "
-                            @focus="
-                              (event) => {
-                                handleFocus(item.inline, event);
-                              }
-                            "
-                            @change="
-                              (val) => {
-                                handleChange(item.inline, val);
-                              }
-                            "
-                          >
-                          </es-cascader>
-                          <es-date-picker
-                            v-else-if="
-                              item.inline.date ||
-                              item.inline.type == 'date' ||
-                              item.inline.type == 'year' ||
-                              item.inline.type == 'month' ||
-                              item.inline.type == 'date' ||
-                              item.inline.type == 'dates' ||
-                              item.inline.type == 'week' ||
-                              item.inline.type == 'datetime' ||
-                              item.inline.type == 'datetimerange' ||
-                              item.inline.type == 'daterange' ||
-                              item.inline.type == 'monthrange' ||
-                              item.inline.type == 'quarter' ||
-                              item.inline.type == 'halfyear'
-                            "
-                            v-bind="item.inline"
-                            v-model="models[item.inline.name]"
-                            :plain="
-                              item.inline.plain ||
-                              item.inline.name === undefined
-                            "
-                            :readonly="
-                              readonly ? readonly : item.inline.readonly
-                            "
-                            @blur="
-                              (event) => {
-                                handleBlur(item.inline, event);
-                              }
-                            "
-                            @focus="
-                              (event) => {
-                                handleFocus(item.inline, event);
-                              }
-                            "
-                            @change="
-                              (val) => {
-                                handleChange(item.inline, val);
-                              }
-                            "
-                          ></es-date-picker>
-                          <es-icons
-                            v-else-if="item.inline.type === 'icon'"
-                            v-bind="
-                              handleExclAttribute({
-                                data: item.inline,
-                                attrs: ['value']
-                              })
-                            "
-                            v-model="models[item.inline.name]"
-                            :plain="
-                              item.inline.plain ||
-                              item.inline.name === undefined
-                            "
-                            :readonly="
-                              readonly ? readonly : item.inline.readonly
-                            "
-                            @change="
-                              (val) => {
-                                handleChange(item.inline, val);
-                              }
-                            "
-                          ></es-icons>
-                          <component
-                            v-else-if="item.inline.type === 'component'"
-                            v-model="models[item.inline.name]"
-                            v-bind="
-                              handleExclAttribute({
-                                data: item.inline,
-                                attrs: ['value']
-                              })
-                            "
-                            v-on="item.inline.events"
-                          ></component>
-                          <es-input
-                            v-else
-                            v-bind="item.inline"
-                            v-model="models[item.inline.name]"
-                            :plain="
-                              item.inline.plain ||
-                              item.inline.name === undefined
-                            "
-                            :readonly="
-                              readonly ? readonly : item.inline.readonly
-                            "
-                            @blur="
-                              (event) => {
-                                handleBlur(item.inline, event);
-                              }
-                            "
-                            @focus="
-                              (event) => {
-                                handleFocus(item.inline, event);
-                              }
-                            "
-                            @change="
-                              (val) => {
-                                handleChange(item.inline, val);
-                              }
-                            "
-                            @input="
-                              (val) => {
-                                handleInput(item.inline, val);
-                              }
-                            "
-                            @clear="
-                              () => {
-                                handleClear(item.inline);
-                              }
-                            "
-                          >
-                            <template v-if="item.inline.prefix" slot="prefix">
-                              <expand-dom
-                                v-if="item.inline.render"
-                                :item="item"
-                                :model="models"
-                                :render="item.inline.render"
-                              ></expand-dom>
-                            </template>
-                            <template slot="suffix" v-if="item.inline.suffix">
-                              <expand-dom
-                                v-if="item.inline.render"
-                                :item="item"
-                                :model="models"
-                                :render="item.inline.render"
-                              ></expand-dom>
-                            </template>
-                            <template v-if="item.inline.prepend" slot="prepend">
-                              <expand-dom
-                                v-if="item.inline.render"
-                                :item="item"
-                                :model="models"
-                                :render="item.inline.render"
-                              ></expand-dom>
-                            </template>
-                            <template v-if="item.inline.append" slot="append">
-                              <expand-dom
-                                v-if="item.inline.render"
-                                :item="item"
-                                :model="models"
-                                :render="item.inline.render"
-                              ></expand-dom>
-                            </template>
-                          </es-input>
-                        </el-form-item>
-                      </template>
-                    </template>
-                  </el-form-item>
-                </template>
-              </td>
-            </template>
-          </template>
-        </tr>
-      </tbody>
-    </table>
-    <template v-for="(item, index) in table">
-      <es-data-table-form
-        v-if="item.lazy"
-        class="es-form-item-table"
-        :data="model[item.name]"
-        :full="false"
-        v-bind="item"
-        :readonly="readonly ? readonly : item.readonly"
-        @blur="
-          (val, data) => {
-            handleBlur(item, val, data);
-          }
-        "
-        @focus="
-          (val, data) => {
-            handleFocus(item, val, data);
-          }
-        "
-        @edit="
-          (val, data) => {
-            handleChange(item, val, data);
-          }
-        "
-        @btnClick="handleClick"
-        @dataChange="handleDataChange"
-      >
-      </es-data-table-form>
-      <es-data-table
-        v-else
-        class="es-form-item-table"
-        ref="dataTable"
-        :data="model[item.name]"
-        :full="false"
-        v-bind="
-          handleExclAttribute({
-            data: item,
-            attrs: ['value', 'events']
-          })
-        "
-        v-on="item.events"
-        :readonly="readonly ? readonly : item.readonly"
-        @blur="
-          (val, data) => {
-            handleBlur(item, val, data);
-          }
-        "
-        @focus="
-          (val, data) => {
-            handleFocus(item, val, data);
-          }
-        "
-        @edit="
-          (val, data) => {
-            handleChange(item, val, data);
-          }
-        "
-        @btnClick="handleClick"
-        @dataChange="handleDataChange"
-      >
-      </es-data-table>
-    </template>
-  </div>
-</template>
-<script>
-import rules from 'eoss-ui/src/utils/rules.js';
-import util from 'eoss-ui/src/utils/util';
-export default {
-  name: 'EsTableForm',
-  components: {
-    expandDom: {
-      functional: true,
-      props: {
-        item: Object,
-        model: Object,
-        render: [Function, String]
-      },
-      render: (h, ctx) => {
-        if (typeof ctx.props.render == 'string') {
-          try {
-            return util.toFunction(ctx.props.render)(h, params);
-          } catch (error) {
-            throw error;
-          }
-        }
-        return ctx.props.render(h, ctx.props.item, ctx.props.model);
-      }
-    }
-  },
-  inject: {
-    scale: {
-      default: ''
-    },
-    esForm: {
-      default: ''
-    }
-  },
-  props: {
-    model: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    disabled: Boolean,
-    span: Number,
-    contents: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    hideRequiredAsterisk: {
-      type: Boolean,
-      default: false
-    },
-    after: {
-      type: Boolean,
-      default: true
-    },
-    labelWidth: {
-      type: [Number, String],
-      default: 120
-    },
-    readonly: Boolean,
-    tableAfter: {
-      type: Boolean,
-      default: true
-    },
-    caption: String,
-    widths: Array,
-    thead: Array,
-    zoom: false
-  },
-  computed: {
-    content() {
-      let content = [];
-      let items = [];
-      let n = 0;
-      let table = [];
-      let formList;
-      if (this.tableAfter) {
-        formList = this.contents.filter((items) => {
-          if (Array.isArray(items)) {
-            return items.filter((item) => {
-              if (item.type === 'table' && item.after !== false) {
-                table.push(item);
-              }
-              return item.type !== 'table' || item.after === false;
-            });
-          }
-          if (items.type === 'table' && items.after !== false) {
-            table.push(items);
-          }
-          return items.type !== 'table' || items.after === false;
-        });
-        this.table = table;
-      } else {
-        formList = this.contents;
-      }
-      if (Array.isArray(formList[0])) {
-        return formList;
-      } else {
-        const contents = formList.filter((item) => {
-          if (!item.hide) {
-            return item;
-          }
-        });
-        contents.forEach((item, index) => {
-          let i = (index - n) % this.col;
-          let cover = false;
-          if (i == 0) {
-            items = [];
-          }
-          if (
-            (item.colspan && item.colspan > 1) ||
-            item.col === 12 ||
-            item.col === 0 ||
-            item.type === 'table' ||
-            item.type === 'caption'
-          ) {
-            cover = true;
-            n++;
-          }
-          if (cover) {
-            if (items.length) {
-              content.push(items);
-              content.push([item]);
-              items = [];
-            } else {
-              content.push([item]);
-            }
-          } else {
-            if (i < this.col) {
-              items.push(item);
-            }
-            if (i + 1 === this.col) {
-              content.push(items);
-            }
-          }
-        });
-        return content;
-      }
-    },
-    models: {
-      get() {
-        return this.model;
-      },
-      set(val) {
-        return val;
-      }
-    },
-    isDisabled() {
-      return this.disabled || (this.esForm || {}).disabled;
-    }
-  },
-  watch: {
-    scale: {
-      deep: true,
-      handler(val) {
-        this.getWidth();
-      }
-    },
-    zoom: {
-      handler(val) {
-        this.getWidth();
-      }
-    }
-  },
-  data() {
-    return {
-      col: this.span ? this.span : 2,
-      cols: [],
-      table: [],
-      required: false
-    };
-  },
-  created() {},
-  mounted() {
-    this.getWidth();
-  },
-  methods: {
-    getLabel(res) {
-      return typeof res === 'string'
-        ? { contents: res }
-        : { ...res, plain: res.plain || res.name === undefined };
-    },
-    getRules(res) {
-      if (res.rules && !res.hide) {
-        if (Array.isArray(res.rules)) {
-          return res.rules.map((item) => {
-            if (item.required) {
-              this.required = item.required;
-            }
-            if (rules[item.type]) {
-              return {
-                pattern: rules[item.type]['pattern'],
-                message: item.message
-                  ? item.message
-                  : rules[item.type]['message'],
-                trigger: item.trigger
-                  ? item.trigger
-                  : res.fetchSuggestions ||
-                    res.url ||
-                    (res.data && res.data.length)
-                  ? 'change'
-                  : 'blur'
-              };
-            }
-            return item;
-          });
-        }
-        if (rules[res.rules.type]) {
-          return {
-            pattern: rules[res.rules.type]['pattern'],
-            message: res.rules.message
-              ? res.rules.message
-              : rules[res.rules.type]['message'],
-            trigger: res.rules.trigger
-              ? res.rules.trigger
-              : res.fetchSuggestions || res.url || (res.data && res.data.length)
-              ? 'change'
-              : 'blur'
-          };
-        }
-        if (res.rules.required) {
-          this.required = res.rules.required;
-        }
-        return res.rules;
-      }
-      return undefined;
-    },
-    getWidth() {
-      this.$nextTick(() => {
-        this.nextTickd();
-      });
-    },
-    nextTickd() {
-      let widths = [];
-      let surplus = 0;
-      let divisor = this.col;
-      let getWidth = this.$refs.dataTable
-        ? this.$refs.dataTable.$el
-          ? this.$refs.dataTable.$el.offsetWidth
-          : this.$refs.dataTable[0].$el.offsetWidth
-        : this.$parent.$el.offsetWidth;
-      if (getWidth < this.$parent.$el.offsetWidth) {
-        getWidth = this.$parent.$el.offsetWidth;
-      }
-      let allWidth = getWidth - parseInt(this.labelWidth, 10) * this.col;
-      if (this.widths && this.widths.length === this.col) {
-        this.widths.forEach((item) => {
-          let num = parseInt(item, 10);
-          if (item && num) {
-            allWidth -= item ? num : 0;
-            divisor--;
-          }
-        });
-      }
-      let width = allWidth / divisor;
-      if (width - Math.floor(width) > 0) {
-        surplus =
-          (getWidth - parseInt(this.labelWidth, 10) * this.col) % this.col;
-      }
-      if (this.col > 1) {
-        for (let i = 0; i < this.col; i++) {
-          if (this.widths && this.widths[i]) {
-            widths.push(parseInt(this.widths[i], 10) + 'px');
-          } else if (i < surplus) {
-            widths.push(Math.floor(width) + 1 + 'px');
-          } else {
-            widths.push(Math.floor(width) + 'px');
-          }
-        }
-      } else {
-        widths = [''];
-      }
-      this.cols = widths;
-    },
-    handleClick(res) {
-      if (res.event && typeof res.event === 'function') {
-        res.event(res);
-      }
-      this.$emit('btnClick', res, this.models);
-      this.$emit('btn-click', res, this.models);
-    },
-    handleChange(res, value, data) {
-      if (res.events && res.events.change) {
-        res.events.change(res, value, data);
-      } else {
-        this.$emit('change', res, value, data);
-      }
-    },
-    handleInput(res, value, data) {
-      this.$emit('input', res, value, data);
-    },
-    handleFocus(res, value, data) {
-      if (res.events && res.events.focus) {
-        res.events.focus(res, value, data);
-      } else {
-        this.$emit('focus', res, value, data);
-      }
-    },
-    handleBlur(res, value, data) {
-      if (res.events && res.events.blur) {
-        res.events.blur(res, value, data);
-      } else {
-        this.$emit('blur', res, value, data);
-      }
-    },
-    handleClear(res, value) {
-      this.$emit('clear', res, value);
-    },
-    handleDataChange(res, data) {
-      if (res.events && res.events.dataChange) {
-        res.events.dataChange(res, value, data);
-      } else {
-        this.$emit('dataChange', res, data);
-        this.$emit('data-change', res, data);
-      }
-    },
-    handleExclAttribute({ data, attrs }) {
-      return util.exclAttribute({
-        data: data,
-        attrs: attrs
-      });
-    }
-  }
-};
-</script>
+<template>
+  <div>
+    <table
+      class="es-table-form"
+      border="1"
+      cellspacing="0"
+      cellpadding="0"
+      v-if="content.length"
+    >
+      <colgroup>
+        <template v-for="(item, index) in cols">
+          <col :width="labelWidth" :key="'label' + index" />
+          <col :width="item" :key="index" />
+        </template>
+      </colgroup>
+      <caption v-if="caption" class="es-table-caption">
+        {{
+          caption
+        }}
+      </caption>
+      <tbody>
+        <tr v-for="(items, indexs) in content" :key="indexs">
+          <template v-for="(item, index) in items">
+            <td
+              v-if="item.type === 'caption'"
+              :colspan="col * 2"
+              :key="index"
+              class="es-table-td-caption"
+            >
+              <div class="es-table-caption">{{ item.text }}</div>
+            </td>
+            <td
+              v-else-if="item.type === 'table'"
+              :colspan="col * 2"
+              :key="index"
+              class="es-table-form-data"
+            >
+              <es-data-table-form
+                v-if="item.lazy"
+                class="es-form-table-data"
+                :data="model[item.name]"
+                :full="false"
+                v-bind="item"
+                :readonly="readonly ? readonly : item.readonly"
+                @blur="
+                  (val, data) => {
+                    handleBlur(item, val, data);
+                  }
+                "
+                @focus="
+                  (val, data) => {
+                    handleFocus(item, val, data);
+                  }
+                "
+                @edit="
+                  (val, data) => {
+                    handleChange(item, val, data);
+                  }
+                "
+                @btnClick="handleClick"
+                @dataChange="handleDataChange"
+              >
+              </es-data-table-form>
+              <es-data-table
+                v-else
+                class="es-form-item-table"
+                ref="dataTable"
+                :data="model[item.name]"
+                :full="false"
+                v-bind="
+                  handleExclAttribute({
+                    data: item,
+                    attrs: ['value', 'events']
+                  })
+                "
+                v-on="item.events"
+                :readonly="readonly ? readonly : item.readonly"
+                @blur="
+                  (val, data) => {
+                    handleBlur(item, val, data);
+                  }
+                "
+                @focus="
+                  (val, data) => {
+                    handleFocus(item, val, data);
+                  }
+                "
+                @edit="
+                  (val, data) => {
+                    handleChange(item, val, data);
+                  }
+                "
+                @btnClick="handleClick"
+                @dataChange="handleDataChange"
+              >
+              </es-data-table>
+            </td>
+            <template v-else>
+              <td
+                v-if="item.label !== false && item.hide !== true"
+                class="es-table-form-label"
+                :class="{
+                  'es-align-middle': item.labelRow,
+                  'is-required':
+                    item.rules && item.rules.required && !hideRequiredAsterisk,
+                  'required-after': after
+                }"
+                :key="'label' + index"
+                :align="item.type === 'label' ? item.align : ''"
+                :colspan="
+                  item.labelCol
+                    ? item.labelCol
+                    : item.type === 'label'
+                    ? item.colspan
+                    : ''
+                "
+                :rowspan="item.labelRow"
+              >
+                <es-label
+                  v-if="item.showLabel !== false && item.label"
+                  v-bind="getLabel(item.label)"
+                ></es-label>
+              </td>
+              <td
+                v-if="
+                  item.type !== 'label' &&
+                  !(item.type === 'empty' && item.labelRow) &&
+                  item.hide !== true
+                "
+                :align="
+                  item.type === 'label' || item.type === 'empty'
+                    ? item.align
+                    : ''
+                "
+                :class="
+                  item.type === 'label' || item.type === 'empty'
+                    ? 'es-table-form-label'
+                    : item.disabled
+                    ? 'es-table-form-item td-disabled'
+                    : 'es-table-form-item'
+                "
+                :key="index"
+                :colspan="
+                  item.colspan
+                    ? item.colspan
+                    : item.colspan !== false && items.length < col
+                    ? col * 2 - items.length
+                    : item.label === false
+                    ? 2
+                    : ''
+                "
+                :rowspan="item.rowspan"
+              >
+                <expand-dom
+                  v-if="item.render"
+                  :item="item"
+                  :model="models"
+                  :render="item.render"
+                ></expand-dom>
+                <template v-else>
+                  <es-label
+                    v-if="
+                      (item.type === 'label' || item.type === 'empty') &&
+                      !item.hide
+                    "
+                    :contents="item.text"
+                    v-bind="{
+                      event: item.event,
+                      events: item.events
+                    }"
+                  ></es-label>
+                  <el-form-item
+                    v-else-if="!item.hide"
+                    label-width="0"
+                    :prop="item.name"
+                    :rules="getRules(item)"
+                    :class="{
+                      'es-form-item-inline': item.inline
+                    }"
+                  >
+                    <es-input-number
+                      v-if="item.type == 'number'"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        (event) => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        (event) => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-input-number>
+                    <es-radio-group
+                      v-else-if="item.type == 'radio'"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-radio-group>
+                    <es-checkbox-group
+                      v-else-if="item.type == 'checkbox'"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-checkbox-group>
+                    <es-select
+                      v-else-if="item.type == 'select'"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        (event) => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        (event) => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-select>
+                    <es-cascader
+                      v-else-if="item.type == 'cascader'"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        (event) => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        (event) => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                    >
+                    </es-cascader>
+                    <es-select-ganged
+                      v-else-if="
+                        item.type == 'ganged' ||
+                        (item.type == 'select' && item.ganged)
+                      "
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-select-ganged>
+                    <es-switch
+                      v-else-if="item.type == 'switch'"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-switch>
+                    <es-date-picker
+                      v-else-if="
+                        item.date ||
+                        item.type == 'date' ||
+                        item.type == 'year' ||
+                        item.type == 'month' ||
+                        item.type == 'date' ||
+                        item.type == 'dates' ||
+                        item.type == 'week' ||
+                        item.type == 'datetime' ||
+                        item.type == 'datetimerange' ||
+                        item.type == 'daterange' ||
+                        item.type == 'monthrange' ||
+                        item.type == 'quarter' ||
+                        item.type == 'halfyear'
+                      "
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        (event) => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        (event) => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-date-picker>
+                    <es-upload
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['value', 'ownId']
+                        })
+                      "
+                      :ownId="item.ownId || models.id"
+                      v-model="model[item.name]"
+                      v-else-if="
+                        item.type == 'attachment' || item.type == 'upload'
+                      "
+                      :readonly="readonly ? readonly : item.readonly"
+                      :rules="item.rules"
+                      btnSize="small"
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                      @getFilesAmount="$emit('getFilesAmount', $value)"
+                    ></es-upload>
+                    <es-selector
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      v-else-if="item.type == 'selector'"
+                      :readonly="readonly ? readonly : item.readonly"
+                      :plain="item.plain"
+                      v-on="
+                        handleExclAttribute({
+                          data: item.events,
+                          attrs: 'change'
+                        })
+                      "
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-selector>
+                    <es-icons
+                      v-else-if="item.type === 'icon'"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['value']
+                        })
+                      "
+                      v-model="models[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-icons>
+                    <component
+                      v-else-if="item.type === 'component'"
+                      v-model="models[item.name]"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['value']
+                        })
+                      "
+                      v-on="item.events"
+                    ></component>
+                    <es-input
+                      v-else
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        (event) => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        (event) => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                      @input="
+                        (val) => {
+                          handleInput(item, val);
+                        }
+                      "
+                      @clear="
+                        () => {
+                          handleClear(item);
+                        }
+                      "
+                    >
+                      <template v-if="item.prefix" slot="prefix">
+                        <expand-dom
+                          v-if="item.render"
+                          :item="item"
+                          :model="models"
+                          :render="item.render"
+                        ></expand-dom>
+                      </template>
+                      <template v-if="item.suffix" slot="suffix">
+                        <expand-dom
+                          v-if="item.render"
+                          :item="item"
+                          :model="models"
+                          :render="item.render"
+                        ></expand-dom>
+                      </template>
+                      <template v-if="item.prepend" slot="prepend">
+                        <expand-dom
+                          v-if="item.render"
+                          :item="item"
+                          :model="models"
+                          :render="item.render"
+                        ></expand-dom>
+                      </template>
+                      <template v-if="item.append" slot="append">
+                        <expand-dom
+                          v-if="item.render"
+                          :item="item"
+                          :model="models"
+                          :render="item.render"
+                        ></expand-dom>
+                      </template>
+                    </es-input>
+                    <template v-if="item.inline">
+                      <template v-if="Array.isArray(item.inline)">
+                        <template v-for="(inline, k) in item.inline">
+                          <es-button
+                            v-if="inline.type == 'button' && !inline.hide"
+                            class="es-button-inline"
+                            :key="k"
+                            :disabled="isDisabled || inline.disabled"
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['disabled', 'type']
+                              })
+                            "
+                            @click="handleClick(inline)"
+                          ></es-button>
+                          <div
+                            v-else-if="!inline.hide"
+                            class="es-form-inline es-form-item-inline"
+                            :key="k"
+                          >
+                            <div class="es-range" v-if="inline.range !== false">
+                              —
+                            </div>
+                            <el-form-item
+                              label-width="0"
+                              :prop="inline.name"
+                              :rules="getRules(inline)"
+                            >
+                              <es-input-number
+                                v-if="inline.type == 'number'"
+                                v-bind="
+                                  handleExclAttribute({
+                                    data: inline,
+                                    attrs: ['value']
+                                  })
+                                "
+                                v-model="models[inline.name]"
+                                :plain="
+                                  inline.plain || inline.name === undefined
+                                "
+                                :readonly="
+                                  readonly ? readonly : inline.readonly
+                                "
+                                @blur="
+                                  (event) => {
+                                    handleBlur(inline, event);
+                                  }
+                                "
+                                @focus="
+                                  (event) => {
+                                    handleFocus(inline, event);
+                                  }
+                                "
+                                @change="
+                                  (val) => {
+                                    handleChange(inline, val);
+                                  }
+                                "
+                              ></es-input-number>
+                              <es-select
+                                v-else-if="inline.type == 'select'"
+                                v-bind="
+                                  handleExclAttribute({
+                                    data: inline,
+                                    attrs: ['value']
+                                  })
+                                "
+                                v-model="models[inline.name]"
+                                :plain="
+                                  inline.plain || inline.name === undefined
+                                "
+                                :readonly="
+                                  readonly ? readonly : inline.readonly
+                                "
+                                @blur="
+                                  (event) => {
+                                    handleBlur(inline, event);
+                                  }
+                                "
+                                @focus="
+                                  (event) => {
+                                    handleFocus(inline, event);
+                                  }
+                                "
+                                @change="
+                                  (val) => {
+                                    handleChange(inline, val);
+                                  }
+                                "
+                              ></es-select>
+                              <es-cascader
+                                v-else-if="inline.type == 'cascader'"
+                                v-bind="
+                                  handleExclAttribute({
+                                    data: inline,
+                                    attrs: ['value']
+                                  })
+                                "
+                                v-model="models[inline.name]"
+                                :plain="
+                                  inline.plain || inline.name === undefined
+                                "
+                                :readonly="
+                                  readonly ? readonly : inline.readonly
+                                "
+                                @blur="
+                                  (event) => {
+                                    handleBlur(inline, event);
+                                  }
+                                "
+                                @focus="
+                                  (event) => {
+                                    handleFocus(inline, event);
+                                  }
+                                "
+                                @change="
+                                  (val) => {
+                                    handleChange(inline, val);
+                                  }
+                                "
+                              >
+                              </es-cascader>
+                              <es-date-picker
+                                v-else-if="
+                                  inline.date ||
+                                  inline.type == 'date' ||
+                                  inline.type == 'year' ||
+                                  inline.type == 'month' ||
+                                  inline.type == 'date' ||
+                                  inline.type == 'dates' ||
+                                  inline.type == 'week' ||
+                                  inline.type == 'datetime' ||
+                                  inline.type == 'datetimerange' ||
+                                  inline.type == 'daterange' ||
+                                  inline.type == 'monthrange' ||
+                                  inline.type == 'quarter' ||
+                                  inline.type == 'halfyear'
+                                "
+                                v-bind="
+                                  handleExclAttribute({
+                                    data: inline,
+                                    attrs: ['value']
+                                  })
+                                "
+                                v-model="models[inline.name]"
+                                :plain="
+                                  inline.plain || inline.name === undefined
+                                "
+                                :readonly="
+                                  readonly ? readonly : inline.readonly
+                                "
+                                @blur="
+                                  (event) => {
+                                    handleBlur(inline, event);
+                                  }
+                                "
+                                @focus="
+                                  (event) => {
+                                    handleFocus(inline, event);
+                                  }
+                                "
+                                @change="
+                                  (val) => {
+                                    handleChange(inline, val);
+                                  }
+                                "
+                              ></es-date-picker>
+                              <template
+                                v-else-if="
+                                  inline.type == 'image' || inline.type == 'img'
+                                "
+                              >
+                                <img
+                                  v-if="inline.url || inline.src"
+                                  v-bind="
+                                    handleExclAttribute({
+                                      data: inline,
+                                      attrs: ['value']
+                                    })
+                                  "
+                                  height="100%"
+                                  :src="inline.url || inline.src"
+                                  @click="inline.event"
+                                />
+                              </template>
+                              <es-icons
+                                v-else-if="inline.type === 'icon'"
+                                v-bind="
+                                  handleExclAttribute({
+                                    data: inline,
+                                    attrs: ['value']
+                                  })
+                                "
+                                v-model="models[inline.name]"
+                                :plain="
+                                  inline.plain || inline.name === undefined
+                                "
+                                :readonly="
+                                  readonly ? readonly : inline.readonly
+                                "
+                                @change="
+                                  (val) => {
+                                    handleChange(inline, val);
+                                  }
+                                "
+                              ></es-icons>
+                              <component
+                                v-else-if="inline.type === 'component'"
+                                v-model="models[inline.name]"
+                                v-bind="
+                                  handleExclAttribute({
+                                    data: inline,
+                                    attrs: ['value']
+                                  })
+                                "
+                                v-on="inline.events"
+                              ></component>
+                              <es-input
+                                v-else
+                                v-bind="
+                                  handleExclAttribute({
+                                    data: inline,
+                                    attrs: ['value']
+                                  })
+                                "
+                                v-model="models[inline.name]"
+                                :plain="
+                                  inline.plain || inline.name === undefined
+                                "
+                                :readonly="
+                                  readonly ? readonly : inline.readonly
+                                "
+                                @blur="
+                                  (event) => {
+                                    handleBlur(inline, event);
+                                  }
+                                "
+                                @focus="
+                                  (event) => {
+                                    handleFocus(inline, event);
+                                  }
+                                "
+                                @input="
+                                  (val) => {
+                                    handleInput(inline, val);
+                                  }
+                                "
+                                @clear="handleClear(inline)"
+                                @change="
+                                  (val) => {
+                                    handleChange(inline, val);
+                                  }
+                                "
+                              ></es-input>
+                            </el-form-item>
+                          </div>
+                        </template>
+                      </template>
+                      <template v-else-if="!item.inline.hide">
+                        <div
+                          class="es-range"
+                          v-if="item.inline.range !== false"
+                        >
+                          —
+                        </div>
+                        <el-form-item
+                          label-width="0"
+                          :prop="item.inline.name"
+                          :rules="getRules(item.inline)"
+                        >
+                          <es-input-number
+                            v-if="item.inline.type == 'number'"
+                            v-bind="item.inline"
+                            v-model="models[item.inline.name]"
+                            :plain="
+                              item.inline.plain ||
+                              item.inline.name === undefined
+                            "
+                            :readonly="
+                              readonly ? readonly : item.inline.readonly
+                            "
+                            @blur="
+                              (event) => {
+                                handleBlur(item.inline, event);
+                              }
+                            "
+                            @focus="
+                              (event) => {
+                                handleFocus(item.inline, event);
+                              }
+                            "
+                            @change="
+                              (val) => {
+                                handleChange(item.inline, val);
+                              }
+                            "
+                          ></es-input-number>
+                          <es-select
+                            v-else-if="item.inline.type == 'select'"
+                            v-bind="
+                              handleExclAttribute({
+                                data: item,
+                                attrs: 'label'
+                              })
+                            "
+                            v-model="models[item.inline.name]"
+                            :plain="
+                              item.inline.plain ||
+                              item.inline.name === undefined
+                            "
+                            :readonly="
+                              readonly ? readonly : item.inline.readonly
+                            "
+                            @blur="
+                              (event) => {
+                                handleBlur(item.inline, event);
+                              }
+                            "
+                            @focus="
+                              (event) => {
+                                handleFocus(item.inline, event);
+                              }
+                            "
+                            @change="
+                              (val) => {
+                                handleChange(item.inline, val);
+                              }
+                            "
+                          ></es-select>
+                          <es-cascader
+                            v-else-if="item.inline.type == 'cascader'"
+                            v-bind="
+                              handleExclAttribute({
+                                data: item,
+                                attrs: 'label'
+                              })
+                            "
+                            v-model="models[item.inline.name]"
+                            :plain="
+                              item.inline.plain ||
+                              item.inline.name === undefined
+                            "
+                            :readonly="
+                              readonly ? readonly : item.inline.readonly
+                            "
+                            @blur="
+                              (event) => {
+                                handleBlur(item.inline, event);
+                              }
+                            "
+                            @focus="
+                              (event) => {
+                                handleFocus(item.inline, event);
+                              }
+                            "
+                            @change="
+                              (val) => {
+                                handleChange(item.inline, val);
+                              }
+                            "
+                          >
+                          </es-cascader>
+                          <es-date-picker
+                            v-else-if="
+                              item.inline.date ||
+                              item.inline.type == 'date' ||
+                              item.inline.type == 'year' ||
+                              item.inline.type == 'month' ||
+                              item.inline.type == 'date' ||
+                              item.inline.type == 'dates' ||
+                              item.inline.type == 'week' ||
+                              item.inline.type == 'datetime' ||
+                              item.inline.type == 'datetimerange' ||
+                              item.inline.type == 'daterange' ||
+                              item.inline.type == 'monthrange' ||
+                              item.inline.type == 'quarter' ||
+                              item.inline.type == 'halfyear'
+                            "
+                            v-bind="item.inline"
+                            v-model="models[item.inline.name]"
+                            :plain="
+                              item.inline.plain ||
+                              item.inline.name === undefined
+                            "
+                            :readonly="
+                              readonly ? readonly : item.inline.readonly
+                            "
+                            @blur="
+                              (event) => {
+                                handleBlur(item.inline, event);
+                              }
+                            "
+                            @focus="
+                              (event) => {
+                                handleFocus(item.inline, event);
+                              }
+                            "
+                            @change="
+                              (val) => {
+                                handleChange(item.inline, val);
+                              }
+                            "
+                          ></es-date-picker>
+                          <es-icons
+                            v-else-if="item.inline.type === 'icon'"
+                            v-bind="
+                              handleExclAttribute({
+                                data: item.inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-model="models[item.inline.name]"
+                            :plain="
+                              item.inline.plain ||
+                              item.inline.name === undefined
+                            "
+                            :readonly="
+                              readonly ? readonly : item.inline.readonly
+                            "
+                            @change="
+                              (val) => {
+                                handleChange(item.inline, val);
+                              }
+                            "
+                          ></es-icons>
+                          <component
+                            v-else-if="item.inline.type === 'component'"
+                            v-model="models[item.inline.name]"
+                            v-bind="
+                              handleExclAttribute({
+                                data: item.inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-on="item.inline.events"
+                          ></component>
+                          <es-input
+                            v-else
+                            v-bind="item.inline"
+                            v-model="models[item.inline.name]"
+                            :plain="
+                              item.inline.plain ||
+                              item.inline.name === undefined
+                            "
+                            :readonly="
+                              readonly ? readonly : item.inline.readonly
+                            "
+                            @blur="
+                              (event) => {
+                                handleBlur(item.inline, event);
+                              }
+                            "
+                            @focus="
+                              (event) => {
+                                handleFocus(item.inline, event);
+                              }
+                            "
+                            @change="
+                              (val) => {
+                                handleChange(item.inline, val);
+                              }
+                            "
+                            @input="
+                              (val) => {
+                                handleInput(item.inline, val);
+                              }
+                            "
+                            @clear="
+                              () => {
+                                handleClear(item.inline);
+                              }
+                            "
+                          >
+                            <template v-if="item.inline.prefix" slot="prefix">
+                              <expand-dom
+                                v-if="item.inline.render"
+                                :item="item"
+                                :model="models"
+                                :render="item.inline.render"
+                              ></expand-dom>
+                            </template>
+                            <template slot="suffix" v-if="item.inline.suffix">
+                              <expand-dom
+                                v-if="item.inline.render"
+                                :item="item"
+                                :model="models"
+                                :render="item.inline.render"
+                              ></expand-dom>
+                            </template>
+                            <template v-if="item.inline.prepend" slot="prepend">
+                              <expand-dom
+                                v-if="item.inline.render"
+                                :item="item"
+                                :model="models"
+                                :render="item.inline.render"
+                              ></expand-dom>
+                            </template>
+                            <template v-if="item.inline.append" slot="append">
+                              <expand-dom
+                                v-if="item.inline.render"
+                                :item="item"
+                                :model="models"
+                                :render="item.inline.render"
+                              ></expand-dom>
+                            </template>
+                          </es-input>
+                        </el-form-item>
+                      </template>
+                    </template>
+                  </el-form-item>
+                </template>
+              </td>
+            </template>
+          </template>
+        </tr>
+      </tbody>
+    </table>
+    <template v-for="(item, index) in table">
+      <es-data-table-form
+        v-if="item.lazy"
+        :key="index"
+        class="es-form-item-table"
+        :data="model[item.name]"
+        :full="false"
+        v-bind="item"
+        :readonly="readonly ? readonly : item.readonly"
+        @blur="
+          (val, data) => {
+            handleBlur(item, val, data);
+          }
+        "
+        @focus="
+          (val, data) => {
+            handleFocus(item, val, data);
+          }
+        "
+        @edit="
+          (val, data) => {
+            handleChange(item, val, data);
+          }
+        "
+        @btnClick="handleClick"
+        @dataChange="handleDataChange"
+      >
+      </es-data-table-form>
+      <es-data-table
+        v-else
+        :key="index"
+        class="es-form-item-table"
+        ref="dataTable"
+        :data="model[item.name]"
+        :full="false"
+        v-bind="
+          handleExclAttribute({
+            data: item,
+            attrs: ['value', 'events']
+          })
+        "
+        v-on="item.events"
+        :readonly="readonly ? readonly : item.readonly"
+        @blur="
+          (val, data) => {
+            handleBlur(item, val, data);
+          }
+        "
+        @focus="
+          (val, data) => {
+            handleFocus(item, val, data);
+          }
+        "
+        @edit="
+          (val, data) => {
+            handleChange(item, val, data);
+          }
+        "
+        @btnClick="handleClick"
+        @dataChange="handleDataChange"
+      >
+      </es-data-table>
+    </template>
+  </div>
+</template>
+<script>
+import rules from 'eoss-ui/src/utils/rules.js';
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'EsTableForm',
+  components: {
+    expandDom: {
+      functional: true,
+      props: {
+        item: Object,
+        model: Object,
+        render: [Function, String]
+      },
+      render: (h, ctx) => {
+        if (typeof ctx.props.render == 'string') {
+          try {
+            return util.toFunction(ctx.props.render)(h, params);
+          } catch (error) {
+            throw error;
+          }
+        }
+        return ctx.props.render(h, ctx.props.item, ctx.props.model);
+      }
+    }
+  },
+  inject: {
+    scale: {
+      default: ''
+    },
+    esForm: {
+      default: ''
+    }
+  },
+  props: {
+    model: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    disabled: Boolean,
+    span: Number,
+    contents: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    hideRequiredAsterisk: {
+      type: Boolean,
+      default: false
+    },
+    after: {
+      type: Boolean,
+      default: true
+    },
+    labelWidth: {
+      type: [Number, String],
+      default: 120
+    },
+    readonly: Boolean,
+    tableAfter: {
+      type: Boolean,
+      default: true
+    },
+    caption: String,
+    widths: Array,
+    thead: Array,
+    zoom: false
+  },
+  computed: {
+    content() {
+      let content = [];
+      let items = [];
+      let n = 0;
+      let table = [];
+      let formList;
+      if (this.tableAfter) {
+        formList = this.contents.filter((items) => {
+          if (Array.isArray(items)) {
+            return items.filter((item) => {
+              if (item.type === 'table' && item.after !== false) {
+                table.push(item);
+              }
+              return item.type !== 'table' || item.after === false;
+            });
+          }
+          if (items.type === 'table' && items.after !== false) {
+            table.push(items);
+          }
+          return items.type !== 'table' || items.after === false;
+        });
+        this.table = table;
+      } else {
+        formList = this.contents;
+      }
+      if (Array.isArray(formList[0])) {
+        return formList;
+      } else {
+        const contents = formList.filter((item) => {
+          if (!item.hide) {
+            return item;
+          }
+        });
+        contents.forEach((item, index) => {
+          let i = (index - n) % this.col;
+          let cover = false;
+          if (i == 0) {
+            items = [];
+          }
+          if (
+            (item.colspan && item.colspan > 1) ||
+            item.col === 12 ||
+            item.col === 0 ||
+            item.type === 'table' ||
+            item.type === 'caption'
+          ) {
+            cover = true;
+            n++;
+          }
+          if (cover) {
+            if (items.length) {
+              content.push(items);
+              content.push([item]);
+              items = [];
+            } else {
+              content.push([item]);
+            }
+          } else {
+            if (i < this.col) {
+              items.push(item);
+            }
+            if (i + 1 === this.col) {
+              content.push(items);
+            }
+          }
+        });
+        return content;
+      }
+    },
+    models: {
+      get() {
+        return this.model;
+      },
+      set(val) {
+        return val;
+      }
+    },
+    isDisabled() {
+      return this.disabled || (this.esForm || {}).disabled;
+    }
+  },
+  watch: {
+    scale: {
+      deep: true,
+      handler(val) {
+        this.getWidth();
+      }
+    },
+    zoom: {
+      handler(val) {
+        this.getWidth();
+      }
+    }
+  },
+  data() {
+    return {
+      col: this.span ? this.span : 2,
+      cols: [],
+      table: [],
+      required: false
+    };
+  },
+  created() {},
+  mounted() {
+    this.getWidth();
+  },
+  methods: {
+    getLabel(res) {
+      return typeof res === 'string'
+        ? { contents: res }
+        : { ...res, plain: res.plain || res.name === undefined };
+    },
+    getRules(res) {
+      if (res.rules && !res.hide) {
+        if (Array.isArray(res.rules)) {
+          return res.rules.map((item) => {
+            if (item.required) {
+              this.required = item.required;
+            }
+            if (rules[item.type]) {
+              return {
+                pattern: rules[item.type]['pattern'],
+                message: item.message
+                  ? item.message
+                  : rules[item.type]['message'],
+                trigger: item.trigger
+                  ? item.trigger
+                  : res.fetchSuggestions ||
+                    res.url ||
+                    (res.data && res.data.length)
+                  ? 'change'
+                  : 'blur'
+              };
+            }
+            return item;
+          });
+        }
+        if (rules[res.rules.type]) {
+          return {
+            pattern: rules[res.rules.type]['pattern'],
+            message: res.rules.message
+              ? res.rules.message
+              : rules[res.rules.type]['message'],
+            trigger: res.rules.trigger
+              ? res.rules.trigger
+              : res.fetchSuggestions || res.url || (res.data && res.data.length)
+              ? 'change'
+              : 'blur'
+          };
+        }
+        if (res.rules.required) {
+          this.required = res.rules.required;
+        }
+        return res.rules;
+      }
+      return undefined;
+    },
+    getWidth() {
+      this.$nextTick(() => {
+        this.nextTickd();
+      });
+    },
+    nextTickd() {
+      let widths = [];
+      let surplus = 0;
+      let divisor = this.col;
+      let getWidth = this.$refs.dataTable
+        ? this.$refs.dataTable.$el
+          ? this.$refs.dataTable.$el.offsetWidth
+          : this.$refs.dataTable[0].$el.offsetWidth
+        : this.$parent.$el.offsetWidth;
+      if (getWidth < this.$parent.$el.offsetWidth) {
+        getWidth = this.$parent.$el.offsetWidth;
+      }
+      let allWidth = getWidth - parseInt(this.labelWidth, 10) * this.col;
+      if (this.widths && this.widths.length === this.col) {
+        this.widths.forEach((item) => {
+          let num = parseInt(item, 10);
+          if (item && num) {
+            allWidth -= item ? num : 0;
+            divisor--;
+          }
+        });
+      }
+      let width = allWidth / divisor;
+      if (width - Math.floor(width) > 0) {
+        surplus =
+          (getWidth - parseInt(this.labelWidth, 10) * this.col) % this.col;
+      }
+      if (this.col > 1) {
+        for (let i = 0; i < this.col; i++) {
+          if (this.widths && this.widths[i]) {
+            widths.push(parseInt(this.widths[i], 10) + 'px');
+          } else if (i < surplus) {
+            widths.push(Math.floor(width) + 1 + 'px');
+          } else {
+            widths.push(Math.floor(width) + 'px');
+          }
+        }
+      } else {
+        widths = [''];
+      }
+      this.cols = widths;
+    },
+    handleClick(res) {
+      if (res.event && typeof res.event === 'function') {
+        res.event(res);
+      }
+      this.$emit('btnClick', res, this.models);
+      this.$emit('btn-click', res, this.models);
+    },
+    handleChange(res, value, data) {
+      if (res.events && res.events.change) {
+        res.events.change(res, value, data);
+      } else {
+        this.$emit('change', res, value, data);
+      }
+    },
+    handleInput(res, value, data) {
+      this.$emit('input', res, value, data);
+    },
+    handleFocus(res, value, data) {
+      if (res.events && res.events.focus) {
+        res.events.focus(res, value, data);
+      } else {
+        this.$emit('focus', res, value, data);
+      }
+    },
+    handleBlur(res, value, data) {
+      if (res.events && res.events.blur) {
+        res.events.blur(res, value, data);
+      } else {
+        this.$emit('blur', res, value, data);
+      }
+    },
+    handleClear(res, value) {
+      this.$emit('clear', res, value);
+    },
+    handleDataChange(res, data) {
+      if (res.events && res.events.dataChange) {
+        res.events.dataChange(res, value, data);
+      } else {
+        this.$emit('dataChange', res, data);
+        this.$emit('data-change', res, data);
+      }
+    },
+    handleExclAttribute({ data, attrs }) {
+      return util.exclAttribute({
+        data: data,
+        attrs: attrs
+      });
+    }
+  }
+};
+</script>