Explorar o código

【update】数据模板垂直对齐样式,操作列宽度调整

cfort %!s(int64=2) %!d(string=hai) anos
pai
achega
0234f4350c
Modificáronse 1 ficheiros con 478 adicións e 477 borrados
  1. 478 477
      src/components/ibps-crud/index.vue

+ 478 - 477
src/components/ibps-crud/index.vue

@@ -1,517 +1,518 @@
 <template>
     <div class="container-component">
-
-      <div ref="ibpsCrud" class="ibps-container-crud">
-
-        <!-- 工具栏 -->
-        <!-- 标题栏-->
-        <div v-if="displayField && displayField!='N'&& displayField!='true'&& displayField!='Y'" class="jbd-title-cont">
-           {{displayField !="8.8.内部审核"?displayField:"内审"}}
-        </div>
-        <div
-          v-if="toolbars || $slots.header"
-          ref="ibpsCrudHeader"
-          class="ibps-container-crud__header"
-        >
-          <div
-            v-if="toolbars"
-            :class="['ibps-toolbar--' +$ELEMENT.size]"
-            class="ibps-toolbar"
-          >
-      <div class="header"
-          style="overflow:scroll;
-            height: 100%;
-            background-color: #F9FFFF;
-            border-bottom: 0px;
-            border-top: 0px;
-            overflow: hidden"
+        <div ref="ibpsCrud" class="ibps-container-crud">
+            <!-- 工具栏 -->
+            <!-- 标题栏-->
+            <div v-if="displayField && displayField!='N'&& displayField!='true'&& displayField!='Y'" class="jbd-title-cont">
+                {{ displayField === '8.8.内部审核' ? '内审' : displayField }}
+            </div>
+            <div
+                v-if="toolbars || $slots.header"
+                ref="ibpsCrudHeader"
+                class="ibps-container-crud__header"
             >
-  <!-- 换了位置 -->
-          <div
-            v-show="$utils.isNotEmpty(searchForm) && showToolbar"
-            ref="toolbarBox"
-            class="toolbar-box clear"
-            style="padding: 0px; border: 0px;"
-          >
-            <template v-if="$slots.searchForm" ref="searchForm">
-              <slot :loading="loading" name="searchForm" />
-            </template>
-
-            <template v-else>
-              <search-form
-                v-if="searchForm"
-                ref="searchForm"
-                :forms="searchForm.forms||[]"
-                size="mini"
-                :fuzzy="searchForm.fuzzy"
-                :inline="searchForm.inline"
-                :label-width="searchForm.labelWidth"
-                :item-width="searchForm.itemWidth"
-                @search="handleActionEvent({key:'search'}, 'toolbar')"
-              >
-                      <template v-for="item in searchFormSlot" :slot="item.slotName">
-                        <slot :name="item.slotName" :item="item" />
-                      </template>
-
-                      <template slot="jbd-buttons" v-if="searchFormSlot.length>0">
-                               <ibps-toolbar
-                                 :actions="toolbars"
-                                 :socpe="thatSocpe"
-                                 @action-event="handleActionEvent"
-                               />
-                      </template>
-
-              </search-form>
-            </template>
-
-          </div>
-
-
-              <div class="buttons"  v-if="$slots.searchForm">
-                <ibps-toolbar
-                  :actions="toolbars"
-                  :socpe="thatSocpe"
-                  @action-event="handleActionEvent"
-                />
-              </div>
-              <div class="buttons" v-else-if="searchFormSlot.length<1">
-                       <ibps-toolbar
-                         :actions="toolbars"
-                         :socpe="thatSocpe"
-                         @action-event="handleActionEvent"
-                       />
-              </div>
-        </div>
-              <!-- 下拉隐藏-->
-             <!-- <div class="tools">
-                <slot name="rightTools" />
-                <el-button v-if="displayField" icon="ibps-icon-cog" class="ibps-crud__display-field" :underline="false" @click="displayFieldVisible=true">{{ $t('components.crud.displayField') }}</el-button>
-                <el-tooltip
-                  v-if="$utils.isNotEmpty(searchForm)"
-                  :content="showToolbar?$t('components.crud.collapse'):$t('components.crud.expand')"
+                <div
+                    v-if="toolbars"
+                    :class="['ibps-toolbar--' +$ELEMENT.size]"
+                    class="ibps-toolbar"
                 >
-                  <a class="expand" @click="handleCollapseExpandToolbar">
-                    <i :class="showToolbar?'el-icon-caret-top':'el-icon-caret-bottom'" />
-                  </a>
-                </el-tooltip>
-              </div> -->
-
+                    <div
+                        class="header"
+                        style="overflow:scroll; height: 100%; background-color: #F9FFFF; border-bottom: 0px; border-top: 0px; overflow: hidden"
+                    >
+                        <!-- 换了位置 -->
+                        <div
+                            v-show="$utils.isNotEmpty(searchForm) && showToolbar"
+                            ref="toolbarBox"
+                            class="toolbar-box clear"
+                            style="padding: 0px; border: 0px;"
+                        >
+                            <template v-if="$slots.searchForm" ref="searchForm">
+                                <slot :loading="loading" name="searchForm" />
+                            </template>
+                            <template v-else>
+                                <search-form
+                                    v-if="searchForm"
+                                    ref="searchForm"
+                                    :forms="searchForm.forms||[]"
+                                    size="mini"
+                                    :fuzzy="searchForm.fuzzy"
+                                    :inline="searchForm.inline"
+                                    :label-width="searchForm.labelWidth"
+                                    :item-width="searchForm.itemWidth"
+                                    @search="handleActionEvent({key:'search'}, 'toolbar')"
+                                >
+                                    <template v-for="item in searchFormSlot" :slot="item.slotName">
+                                        <slot :name="item.slotName" :item="item" />
+                                    </template>
 
+                                    <template v-if="searchFormSlot.length>0" slot="jbd-buttons">
+                                        <ibps-toolbar
+                                            :actions="toolbars"
+                                            :socpe="thatSocpe"
+                                            @action-event="handleActionEvent"
+                                        />
+                                    </template>
+                                </search-form>
+                            </template>
+                        </div>
+                        <div v-if="$slots.searchForm" class="buttons">
+                            <ibps-toolbar
+                                :actions="toolbars"
+                                :socpe="thatSocpe"
+                                @action-event="handleActionEvent"
+                            />
+                        </div>
+                        <div v-else-if="searchFormSlot.length<1" class="buttons">
+                            <ibps-toolbar
+                                :actions="toolbars"
+                                :socpe="thatSocpe"
+                                @action-event="handleActionEvent"
+                            />
+                        </div>
+                    </div>
+                    <!-- 下拉隐藏-->
+                    <!-- <div class="tools">
+                        <slot name="rightTools" />
+                        <el-button v-if="displayField" icon="ibps-icon-cog" class="ibps-crud__display-field" :underline="false" @click="displayFieldVisible=true">{{ $t('components.crud.displayField') }}</el-button>
+                        <el-tooltip
+                            v-if="$utils.isNotEmpty(searchForm)"
+                            :content="showToolbar?$t('components.crud.collapse'):$t('components.crud.expand')"
+                        >
+                            <a class="expand" @click="handleCollapseExpandToolbar">
+                                <i :class="showToolbar?'el-icon-caret-top':'el-icon-caret-bottom'" />
+                            </a>
+                        </el-tooltip>
+                    </div> -->
+                    <slot name="header" />
+                </div>
+            </div>
 
-
-            <slot name="header" />
-          </div>
-        </div>
-
-          <!--列表--><!--   @header-dragend="handleHeaderDragend" 拖拽事件取消 -->
-          <el-table
-            ref="elTable"
-            v-loading="loading"
-            v-bind="options"
-            :row-key="pkKey"
-            :data="ibpsData"
-            :height="tableHeight"
-            :header-cell-style="{color:'#000','font-size':'14px',padding:'6px 6px'}"
-            :stripe="false"
-            :row-class-name="tableRowClassName"
-            @current-change="handleCurrentChange"
-            @select="handleSelect"
-            @select-all="handleSelectAll"
-            @selection-change="handleSelectionChange"
-            @sort-change="handleSortChange"
-            @cell-mouse-enter="handleCellMouseEnter"
-            @cell-mouse-leave="handleCellMouseLeave"
-            @cell-click="handleCellClick"
-            @cell-dblclick="handleCellDblclick"
-            @row-click="handleRowClick"
-            @row-contextmenu="handleRowContextmenu"
-            @row-dblclick="handleRowDblclick"
-            @header-click="handleHeaderClick"
-            @header-contextmenu="handleHeaderContextmenu"
-          >
-            <template slot="empty">
-              <slot v-if="$slots.empty" name="empty" />
-              <ibps-empty v-else />
-            </template>
-            <!--选择列 多选-->
-            <el-table-column
-              v-if="(selectionRow || selectionRow === '') && selectionType === 'checkbox'"
-              v-bind="typeof selectionRow === 'Object'?selectionRow:null"
-              :label="handleAttribute(selectionRow.label, '')"
-              :reserve-selection="selectionRow.reserveSelectione||false"
-              type="selection"
-              show-overflow-tooltip
-            />
-            <!--选择列 单选-->
-            <el-table-column
-              v-if="(selectionRow || selectionRow === '') && selectionType === 'radio'"
-              :label="selectionRow.label||''"
-              :width="selectionRow.width||55"
-              show-overflow-tooltip
+            <!--列表--><!--   @header-dragend="handleHeaderDragend" 拖拽事件取消 -->
+            <el-table
+                ref="elTable"
+                v-loading="loading"
+                v-bind="options"
+                :row-key="pkKey"
+                :data="ibpsData"
+                :height="tableHeight"
+                :header-cell-style="{color:'#000','font-size':'14px',padding:'6px 6px'}"
+                :stripe="false"
+                :row-class-name="tableRowClassName"
+                @current-change="handleCurrentChange"
+                @select="handleSelect"
+                @select-all="handleSelectAll"
+                @selection-change="handleSelectionChange"
+                @sort-change="handleSortChange"
+                @cell-mouse-enter="handleCellMouseEnter"
+                @cell-mouse-leave="handleCellMouseLeave"
+                @cell-click="handleCellClick"
+                @cell-dblclick="handleCellDblclick"
+                @row-click="handleRowClick"
+                @row-contextmenu="handleRowContextmenu"
+                @row-dblclick="handleRowDblclick"
+                @header-click="handleHeaderClick"
+                @header-contextmenu="handleHeaderContextmenu"
             >
-              <template slot-scope="scope">
-                <el-radio v-model="selectionRadio" :label="getPkValue(scope.row)"><span>&nbsp;</span></el-radio>
-              </template>
-            </el-table-column>
-
-            <!-- 自定义表单名称-->
-            <el-table-column :width="180"
-            show-overflow-tooltip
-            label="表单名称"
-            v-if="formName">
-              <template slot-scope="scope">
-                  {{formName}}
-              </template>
-            </el-table-column>
-
-            <!--索引列-->
-            <el-table-column
-              v-if="indexRow || indexRow === ''"
-              v-bind="typeof indexRow === 'Object'?indexRow:null"
-              :label="handleAttribute(indexRow.label, $t('components.crud.index'))"
-              :width="60"
-              type="index"
-            />
-            <slot name="prepend-column" />
-            <template v-for="(column, index) in tableColumns">
-              <el-table-column
-                v-if="showColumn(column)"
-                :key="index"
-                :prop="handleAttribute(column.prop, null)"
-                :label="handleAttribute(column.label, '')"
-                :width="handleAttribute(column.width,null)"
-                v-bind="column"
-                show-overflow-tooltip
-              >
-                <template slot="header">
-                  <slot :name="column.headerName" :column="column" />
+                <template slot="empty">
+                    <slot v-if="$slots.empty" name="empty" />
+                    <ibps-empty v-else />
                 </template>
-                <template slot-scope="scope">
-                  <!--时间格式-->
-                  <span v-if="column.dateFormat" class="ibps-table-column">
-                    {{ scope.row[column.prop] | dateFormat(column.dateFormat,column.origDateFormat) }}
-                  </span>
-                  <!--通用过滤器-->
-                  <span v-else-if="column.filter" class="ibps-table-column">
-                    {{ handleColumnFilter(column.filter,scope.row[column.prop]) }}
-                  </span>
-                  <!-- 下拉组件-->
-                  <span v-else-if="column.options" class="ibps-table-column">
-                    <!--stringArray 字符串类型的数组,逗号分隔-->
-                    <template v-if="column.dataType==='stringArray'">
-                      <span
-                        v-for="(value,i) in handleColumnDataConvert(scope.row[column.prop],column.separator)"
-                        :key="i"
-                      >
-                        {{ handleColumnOptions('label',column.options,value,column) }}<template v-if="handleColumnDataConvert(scope.row[column.prop],column.separator).length-1 !==i">,</template>
-                      </span>
-                    </template>
-                    <!--stringArray 字符串类型的数组-->
-                    <template v-else-if="column.dataType==='objectList'">
-                      <span v-for="(value,j) in scope.row[column.prop]" :key="j">
-                        {{ value[column.tagLabel] }}
-                      </span>
-                    </template>
-                    <span v-else>{{ handleColumnOptions('label',column.options,scope.row[column.prop]) }}</span>
-
-                  </span>
-                  <!-- tags组件-->
-                  <span v-else-if="column.tags" class="ibps-table-column">
-                    <span v-if="$utils.isEmpty(scope.row[column.prop]) ">{{ column.defaultLabel||'' }}</span>
-                    <!--stringArray 字符串类型的数组-->
-                    <template v-else-if="column.dataType==='stringArray'">
-                      <el-tag
-                        v-for="(value,i) in handleColumnDataConvert(scope.row[column.prop],column.separator)"
-                        :key="i"
-                        :type="handleColumnOptions('type',column.tags,value,column)"
-                      >
-                        {{ handleColumnOptions('label',column.tags,value,column) }}
-                      </el-tag>
-                    </template>
-                    <!--stringArray 字符串类型的数组-->
-                    <template v-else-if="column.dataType==='objectList'">
-                      <el-tag v-for="(value,j) in scope.row[column.prop]" :key="j">
-                        {{ value[column.tagLabel] }}
-                      </el-tag>
-                    </template>
-                    <template v-else>
-                      <el-tag :type="handleColumnOptions('type',column.tags,scope.row[column.prop],column)">{{ handleColumnOptions('label',column.tags,scope.row[column.prop],column) }}</el-tag>
+                <!--选择列 多选-->
+                <el-table-column
+                    v-if="(selectionRow || selectionRow === '') && selectionType === 'checkbox'"
+                    v-bind="typeof selectionRow === 'Object'?selectionRow:null"
+                    :label="handleAttribute(selectionRow.label, '')"
+                    :reserve-selection="selectionRow.reserveSelectione||false"
+                    type="selection"
+                    show-overflow-tooltip
+                />
+                <!--选择列 单选-->
+                <el-table-column
+                    v-if="(selectionRow || selectionRow === '') && selectionType === 'radio'"
+                    :label="selectionRow.label||''"
+                    :width="selectionRow.width||55"
+                    show-overflow-tooltip
+                >
+                    <template slot-scope="scope">
+                        <el-radio v-model="selectionRadio" :label="getPkValue(scope.row)"><span>&nbsp;</span></el-radio>
                     </template>
-                  </span>
-                  <!-- link组件-->
-                  <span v-else-if="column.link" class="ibps-table-column">
-                    <el-link :type="column.type||'primary'" :underline="column.underline||false" @click="handleColumnLink(column,scope.row)">
-                      {{ scope.row[column.prop] |removeHtmlTag }}
-                    </el-link>
-                  </span>
-
-                  <!-- 自定义slot组件############################################-->
-                 <span v-else-if="column.slotName" class="ibps-table-column">
-                    <slot  :name="column.slotName" :row="scope.row" :value="scope.row[column.prop]" :column="column" :$index="scope.$index" />
-                  </span>
+                </el-table-column>
 
-                  <!--自定义组件-->
-                  <render-custom-component
-                    v-else-if="column.component && column.component.name"
-                    v-model="scope.row[column.prop]"
-                    :component-name="column.component.name"
-                  />
-                  <!--渲染组件-->
-                  <render-component
-                    v-else-if="column.component && column.component.render"
-                    :render-function="column.component.render"
-                    :scope="scope"
-                  />
-                  <template v-else>
-                    {{ column.formatter ? column.formatter(scope.row, scope.column, _get(scope.row, column.prop), scope.$index) : _get(scope.row, column.prop) }}
-                  </template>
-                </template>
-                <!--子列 -->
-                <template v-if="column.children">
-                  <el-table-column
-                  show-overflow-tooltip
-                    v-for="(column2, index2) in column.children"
-                    :key="index2"
-                    :label="handleAttribute(column2.title, '')"
-                    :prop="handleAttribute(column2.key, null)"
-                    v-bind="column2"
-                  >
+                <!-- 自定义表单名称,不再显示-->
+                <el-table-column
+                    v-if="0 && formName"
+                    :width="180"
+                    show-overflow-tooltip
+                    label="表单名称"
+                >
                     <template slot-scope="scope">
-                      <!--过滤器-->
-                      <span v-if="column2.filter">
-                        {{ handleColumnFilter(column2.filter,scope.row[column2.prop]) }}
-                      </span>
-                      <!-- 下拉组件-->
-                      <span v-else-if="column2.options" class="table-column-options">
-                        <span>{{ handleColumnOptions('label',column2.options,scope.row[column2.prop]) }}</span>
-                      </span>
-                      <!-- tags组件-->
-                      <span v-else-if="column2.tags" class="table-column-tags">
-                        <el-tag :type="handleTags('type',column2.tags,scope.row[column2.prop])">{{ handleTags('label',column2.tags,scope.row[column2.prop]) }}</el-tag>
-                      </span>
-                      <!-- link组件-->
-                      <span v-else-if="column2.link">
-                        <a href="javascript:void(0)" class="table-column-link" @click="handleColumnLink(column2,scope.row)">{{ scope.row[column2.prop] }}</a>
-                      </span>
-                      <span v-else-if="column2.slotName">
-                        <slot :name="column2.slotName" :row="scope.row" :$index="scope.$index" />
-                      </span>
-                      <!--自定义组件-->
-                      <render-custom-component
-                        v-else-if="column2.component && column2.component.name"
-                        v-model="scope.row[column2.prop]"
-                        :component-name="column2.component.name"
-                      />
-                      <!--渲染组件-->
-                      <render-component
-                        v-else-if="column2.component && column2.component.render"
-                        :render-function="column2.component.render"
-                        :scope="scope"
-                      />
-                      <span v-if="contorlLength">
-                          <el-tooltip class="item" effect="dark" :content="column.formatter ? column.formatter(scope.row, scope.column, _get(scope.row, column.prop), scope.$index) : _get(scope.row, column.prop)" placement="bottom">
-                              <span>
-                             {{ column2.formatter ? column2.formatter(scope.row, scope.column2, _get(scope.row, column2.prop), scope.$index) : _get(scope.row, column2.prop)| ellipsis }}
-                              </span>
-                          </el-tooltip>
-                      </span>
-                      <template v-else>{{ column2.formatter ? column2.formatter(scope.row, scope.column2, _get(scope.row, column2.prop), scope.$index) : _get(scope.row, column2.prop) }}</template>
+                        {{ formName }}
                     </template>
-                  </el-table-column>
-                  <!-- end 子列-->
-                </template>
-              </el-table-column>
-            </template>
-            <!--操作列begin-->
-            <!--  $t('components.crud.manage')    handleAttribute(rowHandle.width, rowHandleDefaultWidth)     -->
-            <el-table-column
-              v-if="rowHandle"
-              v-bind="rowHandle"
-              :label=" handleAttribute(rowHandle.columnHeader,'操作') "
-              :width="handleAttribute(rowHandle.width, rowHandleDefaultWidth) <80 ?  '80' : this.rowHandle.actions.length !=0 && this.rowHandle.actions.length<=3  ? 90 + 50 * (this.rowHandle.actions.length - 1) : 90"
-              :fixed="handleAttribute(rowHandle.fixed, 'right')"
-              :align="handleAttribute(rowHandle.align, 'center')"
-            >
-
+                </el-table-column>
 
-              <template v-slot:default="scope">
-
-                <slot name="selectCont" :row="scope.row" />
-                <template v-if="hasRowHandleActions(scope.row)">
-                  <template v-if="rowHandle.effect ==='display'">
-                    <ibps-toolbar
-                      v-if="!rowHandleMoreActions || rowHandleMoreActions.length <=1"
-                      :actions="rowHandleActions"
-                      :socpe="thatSocpe"
-                      :data="scope.row"
-                      position="manage"
-                      type="link"
-                      @action-event="handleActionEvent"
-                    />
-                  <template v-if="rowHandleMoreActions && rowHandleMoreActions.length ==1">
-                      <div class="el-divider el-divider--vertical"/>
-                          <ibps-toolbar
-                            :actions="rowHandleMoreActions"
-                            :socpe="thatSocpe"
-                            :data="scope.row"
-                            position="manage"
-                            type="link"
-                            @action-event="handleActionEvent"
-                          />
-                    </template>
+                <!--索引列-->
+                <el-table-column
+                    v-if="indexRow || indexRow === ''"
+                    v-bind="typeof indexRow === 'Object'?indexRow:null"
+                    :label="handleAttribute(indexRow.label, $t('components.crud.index'))"
+                    :width="60"
+                    type="index"
+                />
+                <slot name="prepend-column" />
+                <template v-for="(column, index) in tableColumns">
+                    <el-table-column
+                        v-if="showColumn(column)"
+                        :key="index"
+                        :prop="handleAttribute(column.prop, null)"
+                        :label="handleAttribute(column.label, '')"
+                        :width="handleAttribute(column.width,null)"
+                        :class-name="'vertical-' + handleAttribute(column.vertical, 'middle')"
+                        v-bind="column"
+                        show-overflow-tooltip
+                    >
+                        <template slot="header">
+                            <slot :name="column.headerName" :column="column" />
+                        </template>
+                        <template slot-scope="scope">
+                            <!--时间格式-->
+                            <span v-if="column.dateFormat" class="ibps-table-column">
+                                {{ scope.row[column.prop] | dateFormat(column.dateFormat,column.origDateFormat) }}
+                            </span>
+                            <!--通用过滤器-->
+                            <span v-else-if="column.filter" class="ibps-table-column">
+                                {{ handleColumnFilter(column.filter,scope.row[column.prop]) }}
+                            </span>
+                            <!-- 下拉组件-->
+                            <span v-else-if="column.options" class="ibps-table-column">
+                                <!--stringArray 字符串类型的数组,逗号分隔-->
+                                <template v-if="column.dataType==='stringArray'">
+                                    <span
+                                        v-for="(value,i) in handleColumnDataConvert(scope.row[column.prop],column.separator)"
+                                        :key="i"
+                                    >
+                                        {{ handleColumnOptions('label',column.options,value,column) }}<template v-if="handleColumnDataConvert(scope.row[column.prop],column.separator).length-1 !==i">,</template>
+                                    </span>
+                                </template>
+                                <!--stringArray 字符串类型的数组-->
+                                <template v-else-if="column.dataType==='objectList'">
+                                    <span v-for="(value,j) in scope.row[column.prop]" :key="j">
+                                        {{ value[column.tagLabel] }}
+                                    </span>
+                                </template>
+                                <span v-else>{{ handleColumnOptions('label',column.options,scope.row[column.prop]) }}</span>
 
-                    <template v-if="rowHandleMoreActions && rowHandleMoreActions.length >1" >
-                      <el-dropdown>
-                        <i class="el-icon-caret-bottom el-dropdown-link" style="font-size:14px;">更多</i>
-                        <el-dropdown-menu slot="dropdown" class="ibps-table-dropdown-menu">
-                              <ibps-toolbar
-                                :actions="rowHandleMoreActions.concat(rowHandleActions)"
-                                :socpe="thatSocpe"
-                                :data="scope.row"
-                                position="manage"
-                                type="linkHide"
-                                @action-event="handleActionEvent"
-                              />
-                        </el-dropdown-menu>
-                      </el-dropdown>
-                    </template>
+                            </span>
+                            <!-- tags组件-->
+                            <span v-else-if="column.tags" class="ibps-table-column">
+                                <span v-if="$utils.isEmpty(scope.row[column.prop]) ">{{ column.defaultLabel||'' }}</span>
+                                <!--stringArray 字符串类型的数组-->
+                                <template v-else-if="column.dataType==='stringArray'">
+                                    <el-tag
+                                        v-for="(value,i) in handleColumnDataConvert(scope.row[column.prop],column.separator)"
+                                        :key="i"
+                                        :type="handleColumnOptions('type',column.tags,value,column)"
+                                    >
+                                        {{ handleColumnOptions('label',column.tags,value,column) }}
+                                    </el-tag>
+                                </template>
+                                <!--stringArray 字符串类型的数组-->
+                                <template v-else-if="column.dataType==='objectList'">
+                                    <el-tag v-for="(value,j) in scope.row[column.prop]" :key="j">
+                                        {{ value[column.tagLabel] }}
+                                    </el-tag>
+                                </template>
+                                <template v-else>
+                                    <el-tag :type="handleColumnOptions('type',column.tags,scope.row[column.prop],column)">{{ handleColumnOptions('label',column.tags,scope.row[column.prop],column) }}</el-tag>
+                                </template>
+                            </span>
+                            <!-- link组件-->
+                            <span v-else-if="column.link" class="ibps-table-column">
+                                <el-link :type="column.type||'primary'" :underline="column.underline||false" @click="handleColumnLink(column,scope.row)">
+                                    {{ scope.row[column.prop] |removeHtmlTag }}
+                                </el-link>
+                            </span>
 
-                  </template>
-                  <!-- 下拉-->
-                  <template v-else>
-                    <el-dropdown>
-                      <i class="ibps-icon ibps-icon-chevron-circle-down" style="font-size:24px;" />
-                      <el-dropdown-menu slot="dropdown" class="ibps-table-dropdown-menu">
-                        <ibps-toolbar
-                          :actions="rowHandleActions"
-                          :socpe="thatSocpe"
-                          :data="scope.row"
-                          position="manage"
-                          @action-event="handleActionEvent"
-                        />
-                      </el-dropdown-menu>
-                    </el-dropdown>
+                            <!-- 自定义slot组件############################################-->
+                            <span v-else-if="column.slotName" class="ibps-table-column">
+                                <slot :name="column.slotName" :row="scope.row" :value="scope.row[column.prop]" :column="column" :$index="scope.$index" />
+                            </span>
 
-                    <span>&nbsp;</span>
-                  </template>
+                            <!--自定义组件-->
+                            <render-custom-component
+                                v-else-if="column.component && column.component.name"
+                                v-model="scope.row[column.prop]"
+                                :component-name="column.component.name"
+                            />
+                            <!--渲染组件-->
+                            <render-component
+                                v-else-if="column.component && column.component.render"
+                                :render-function="column.component.render"
+                                :scope="scope"
+                            />
+                            <template v-else>
+                                {{ column.formatter ? column.formatter(scope.row, scope.column, _get(scope.row, column.prop), scope.$index) : _get(scope.row, column.prop) }}
+                            </template>
+                        </template>
+                        <!--子列 -->
+                        <template v-if="column.children">
+                            <el-table-column
+                                v-for="(column2, index2) in column.children"
+                                :key="index2"
+                                show-overflow-tooltip
+                                :label="handleAttribute(column2.title, '')"
+                                :prop="handleAttribute(column2.key, null)"
+                                v-bind="column2"
+                            >
+                                <template slot-scope="scope">
+                                    <!--过滤器-->
+                                    <span v-if="column2.filter">
+                                        {{ handleColumnFilter(column2.filter,scope.row[column2.prop]) }}
+                                    </span>
+                                    <!-- 下拉组件-->
+                                    <span v-else-if="column2.options" class="table-column-options">
+                                        <span>{{ handleColumnOptions('label',column2.options,scope.row[column2.prop]) }}</span>
+                                    </span>
+                                    <!-- tags组件-->
+                                    <span v-else-if="column2.tags" class="table-column-tags">
+                                        <el-tag :type="handleTags('type',column2.tags,scope.row[column2.prop])">{{ handleTags('label',column2.tags,scope.row[column2.prop]) }}</el-tag>
+                                    </span>
+                                    <!-- link组件-->
+                                    <span v-else-if="column2.link">
+                                        <a href="javascript:void(0)" class="table-column-link" @click="handleColumnLink(column2,scope.row)">{{ scope.row[column2.prop] }}</a>
+                                    </span>
+                                    <span v-else-if="column2.slotName">
+                                        <slot :name="column2.slotName" :row="scope.row" :$index="scope.$index" />
+                                    </span>
+                                    <!--自定义组件-->
+                                    <render-custom-component
+                                        v-else-if="column2.component && column2.component.name"
+                                        v-model="scope.row[column2.prop]"
+                                        :component-name="column2.component.name"
+                                    />
+                                    <!--渲染组件-->
+                                    <render-component
+                                        v-else-if="column2.component && column2.component.render"
+                                        :render-function="column2.component.render"
+                                        :scope="scope"
+                                    />
+                                    <span v-if="contorlLength">
+                                        <el-tooltip class="item" effect="dark" :content="column.formatter ? column.formatter(scope.row, scope.column, _get(scope.row, column.prop), scope.$index) : _get(scope.row, column.prop)" placement="bottom">
+                                            <span>
+                                                {{ column2.formatter ? column2.formatter(scope.row, scope.column2, _get(scope.row, column2.prop), scope.$index) : _get(scope.row, column2.prop)| ellipsis }}
+                                            </span>
+                                        </el-tooltip>
+                                    </span>
+                                    <template v-else>{{ column2.formatter ? column2.formatter(scope.row, scope.column2, _get(scope.row, column2.prop), scope.$index) : _get(scope.row, column2.prop) }}</template>
+                                </template>
+                            </el-table-column>
+                            <!-- end 子列-->
+                        </template>
+                    </el-table-column>
                 </template>
-              </template>
-            </el-table-column>
+                <!--操作列begin-->
+                <!--  $t('components.crud.manage')    handleAttribute(rowHandle.width, rowHandleDefaultWidth)     -->
+                <el-table-column
+                    v-if="rowHandle"
+                    v-bind="rowHandle"
+                    :label=" handleAttribute(rowHandle.columnHeader,'操作') "
+                    :width="handleAttribute(rowHandle.width, rowHandleDefaultWidth) < 80 ? '80' : this.rowHandle.actions.length != 0 && this.rowHandle.actions.length <= 3 ? 90 + 60 * (this.rowHandle.actions.length - 1) : 90"
+                    :fixed="handleAttribute(rowHandle.fixed, 'right')"
+                    :align="handleAttribute(rowHandle.align, 'center')"
+                >
+                    <template v-slot:default="scope">
+                        <slot name="selectCont" :row="scope.row" />
+                        <template v-if="hasRowHandleActions(scope.row)">
+                            <template v-if="rowHandle.effect ==='display'">
+                                <ibps-toolbar
+                                    v-if="!rowHandleMoreActions || rowHandleMoreActions.length <=1"
+                                    :actions="rowHandleActions"
+                                    :socpe="thatSocpe"
+                                    :data="scope.row"
+                                    position="manage"
+                                    type="link"
+                                    @action-event="handleActionEvent"
+                                />
+                                <template v-if="rowHandleMoreActions && rowHandleMoreActions.length ==1">
+                                    <div class="el-divider el-divider--vertical" />
+                                    <ibps-toolbar
+                                        :actions="rowHandleMoreActions"
+                                        :socpe="thatSocpe"
+                                        :data="scope.row"
+                                        position="manage"
+                                        type="link"
+                                        @action-event="handleActionEvent"
+                                    />
+                                </template>
+                                <template v-if="rowHandleMoreActions && rowHandleMoreActions.length >1">
+                                    <el-dropdown>
+                                        <i class="el-icon-caret-bottom el-dropdown-link" style="font-size:14px;">更多</i>
+                                        <el-dropdown-menu slot="dropdown" class="ibps-table-dropdown-menu">
+                                            <ibps-toolbar
+                                                :actions="rowHandleMoreActions.concat(rowHandleActions)"
+                                                :socpe="thatSocpe"
+                                                :data="scope.row"
+                                                position="manage"
+                                                type="linkHide"
+                                                @action-event="handleActionEvent"
+                                            />
+                                        </el-dropdown-menu>
+                                    </el-dropdown>
+                                </template>
+                            </template>
+                            <!-- 下拉-->
+                            <template v-else>
+                                <el-dropdown>
+                                    <i class="ibps-icon ibps-icon-chevron-circle-down" style="font-size:24px;" />
+                                    <el-dropdown-menu slot="dropdown" class="ibps-table-dropdown-menu">
+                                        <ibps-toolbar
+                                            :actions="rowHandleActions"
+                                            :socpe="thatSocpe"
+                                            :data="scope.row"
+                                            position="manage"
+                                            @action-event="handleActionEvent"
+                                        />
+                                    </el-dropdown-menu>
+                                </el-dropdown>
+
+                                <span>&nbsp;</span>
+                            </template>
+                        </template>
+                    </template>
+                </el-table-column>
             <!--操作列end-->
-          </el-table>
-        <!--分页 或底部 自定义底部-->
-        <div
-          v-if="isShowPagination"
-          ref="ibpsCrudFooter"
-          class="ibps-container-crud__footer"
-        >
-          <template v-if="$slots.footer">
-            <slot name="footer" />
-          </template>
-          <el-pagination
-            v-else
-            :current-page="currentPage"
-            :page-size="pageSize"
-            :page-count="pagination[pageCountKey]"
-            :total="pagination[totalKey]"
-            v-bind="paginationOptions"
-            @size-change="handlePaginationSizeChange"
-            @current-change="handlePaginationCurrentChange"
-            @prev-click="handlePaginationPrevClick"
-            @next-click="handlePaginationNextClick"
-          >
-            <template>
-              <span class="el-pagination__total">{{ pageInfo }}</span>
-            </template>
-          </el-pagination>
+            </el-table>
+            <!--分页 或底部 自定义底部-->
+            <div
+                v-if="isShowPagination"
+                ref="ibpsCrudFooter"
+                class="ibps-container-crud__footer"
+            >
+                <template v-if="$slots.footer">
+                    <slot name="footer" />
+                </template>
+                <el-pagination
+                    v-else
+                    :current-page="currentPage"
+                    :page-size="pageSize"
+                    :page-count="pagination[pageCountKey]"
+                    :total="pagination[totalKey]"
+                    v-bind="paginationOptions"
+                    @size-change="handlePaginationSizeChange"
+                    @current-change="handlePaginationCurrentChange"
+                    @prev-click="handlePaginationPrevClick"
+                    @next-click="handlePaginationNextClick"
+                >
+                    <template>
+                        <span class="el-pagination__total">{{ pageInfo }}</span>
+                    </template>
+                </el-pagination>
+            </div>
         </div>
-      </div>
-      <!--显示字段-->
-      <display-field-dialog
-        :visible="displayFieldVisible"
-        :fields="columns"
-        :data="displayFields"
-        @callback="handleDisplayField"
-        @close="visible => displayFieldVisible = visible"
-      />
+        <!--显示字段-->
+        <display-field-dialog
+            :visible="displayFieldVisible"
+            :fields="columns"
+            :data="displayFields"
+            @callback="handleDisplayField"
+            @close="visible => displayFieldVisible = visible"
+        />
     </div>
-  </template>
+</template>
 
-  <script>
-  import base from './mixin/base'
-  import handleRow from './mixin/handleRow'
-  import data from './mixin/data'
-  import search from './mixin/search'
-  import column from './mixin/column'
-  import pagination from './mixin/pagination'
-  import displayField from './mixin/displayField'
-  import utils from './mixin/utils'
+<script>
+import base from './mixin/base'
+import handleRow from './mixin/handleRow'
+import data from './mixin/data'
+import search from './mixin/search'
+import column from './mixin/column'
+import pagination from './mixin/pagination'
+import displayField from './mixin/displayField'
+import utils from './mixin/utils'
 
-  import RenderComponent from './components/render-component.vue'
-  import RenderCustomComponent from './components/render-custom-component.vue'
-  import SearchForm from './components/search-form'
-  import DisplayFieldDialog from './components/display-field'
+import RenderComponent from './components/render-component.vue'
+import RenderCustomComponent from './components/render-custom-component.vue'
+import SearchForm from './components/search-form'
+import DisplayFieldDialog from './components/display-field'
 
-  export default {
-    props:['contorlLength'],
+export default {
     name: 'ibps-crud',
-    filters: { //定义过滤器
-      ellipsis(value) {
-        if (!value) return ''
-        if (value.length > 7) {
-          return value.slice(0,7) + '..'
+    filters: { // 定义过滤器
+        ellipsis (value) {
+            if (!value) return ''
+            if (value.length > 7) {
+                return value.slice(0, 7) + '..'
+            }
+            return value
         }
-        return value
-      }
     },
     components: {
-      RenderComponent,
-      RenderCustomComponent,
-      SearchForm,
-      DisplayFieldDialog
+        RenderComponent,
+        RenderCustomComponent,
+        SearchForm,
+        DisplayFieldDialog
     },
     mixins: [
-      base,
-      data,
-      search,
-      column,
-      handleRow,
-      pagination,
-      displayField,
-      utils
-    ]
-  }
-  </script>
-  <style>
+        base,
+        data,
+        search,
+        column,
+        handleRow,
+        pagination,
+        displayField,
+        utils
+    ],
+    props: ['contorlLength']
+}
+</script>
+<style>
     .el-table th{
-      background-color: #A7D6F8 !important;
-      font-size: 12px  !important;
-      color: #000000;
-      border: 0px;
+        background-color: #A7D6F8 !important;
+        font-size: 12px  !important;
+        color: #000000;
+        border: 0px;
     }
     .jbd-title-cont{
-      text-align: center;
-      font-weight: bold;
-      background-color: rgb(249, 255, 255);
-      width: 100%;
-      font-size: 18px;
-      }
+        text-align: center;
+        font-weight: bold;
+        background-color: rgb(249, 255, 255);
+        width: 100%;
+        font-size: 18px;
+    }
     .el-table .caret-wrapper{
-          top: -5px;
-      position: absolute;
-        }
+        top: -5px;
+        position: absolute;
+    }
+    .el-table .sort-caret.ascending{
+        border-bottom-color: #909399;
+    }
+    .el-table .sort-caret.descending{
+        border-top-color: #909399;
+    }
     .el-table td{
-       padding: 4px 0 !important;
-       color: #000000;
-       font-size: 12px  !important;
-     }
+        padding: 4px 0 !important;
+        color: #000000;
+        font-size: 12px  !important;
+    }
     .el-table .warning-row {
         background: #D9EEFD;
         color: #000000;
-      }
+    }
 
-      .el-table .success-row {
+    .el-table .success-row {
         background: #F9FFFF;
         color: #000000;
-      }
-  </style>
+    }
+    .el-table .el-table-column--selection {
+        text-align: center;
+    }
+    .el-table .vertical-top {
+        vertical-align: top;
+    }
+    .el-table .vertical-middle {
+        vertical-align: middle;
+    }
+    .el-table .vertical-bottom {
+        vertical-align: bottom;
+    }
+</style>