cloud-ui.vusion/src/u-table-view.vue/index.html

Vusion Cloud UI

<div :class="$style.root" ref="root" :border="border" :style="{height: height+'px', width: width + 'px', maxHeight: maxHeight + 'px', minHeight: minHeight + 'px'}" v-show="visible" @mouseover="mouseover" @mouseleave="mouseleave">
    <div :class="$style.title" v-if="title" ref="title">
        {{title}}
        <slot name="title"></slot>
    </div>
    <template v-if="layout === 'auto'">
        <table :class="$style.table" cellspacing="0" cellpadding="0" border="0" :style="{tableLayout: layout}">
            <thead v-if="showHeader">
                <tr :class="$style.htrItem" :color="color">
                    <th v-for="(column, index) in columns" :class="[$style.hthSpan, column.headClass]" :role="column.filter || column.sortable" :border="border" :selection="column.type==='selection'"
                        @click.stop="handleSort(column)">
                        <template v-if="column.type === 'selection' && column.headSelection">
                            <u-checkbox v-model="allSel" @check="allSelected" />
                        </template>
                        <span v-if="!column.filter" :class="$style.itemtitle">
                            <template v-if="!column.$slots.headerTitle">{{ column.title }}</template>
                            <template v-else>
                                <u-table-view-cell :class="$style.ditem" :column="column" text></u-table-view-cell>
                            </template>
                        </span>
                        <template v-else-if="column.filter">
                            <u-popper ref="popper" trigger="click" :placement="column.placement" append-to="body">
                                <div :class="$style.filtertitle" :role="column.filter">
                                    <span :class="$style.titleitem">{{column.title}}</span>
                                    <div :class="$style.traingle"></div>
                                </div>
                                <div :class="$style.popper" slot="popper">
                                    <div :class="$style.option" v-for="option in column.options" @click.stop="select(option, column, index)" :role="column.selectValue === option.value">{{option.name}}</div>
                                </div>
                            </u-popper>
                        </template>
                        <template v-if="column.sortable">
                            <span :class="$style.wrapicon">
                                <u-icon :class="$style.icon" name="arrow-up" v-if="currentSort.order === 'asc' && currentSort.title === column.title" :role="currentSort.title === column.title"></u-icon>
                                <u-icon :class="$style.icon" name="arrow-down" v-else :role="currentSort.title === column.title"></u-icon>
                            </span>
                        </template>
                    </th>
                </tr>
            </thead>
            <tbody :class="$style.btbody" :no-show-header="!showHeader">
                <template v-if="loading">
                    <tr :class="$style.btrItem">
                        <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center">
                            <u-loading></u-loading>
                            <span :class="$style.loadText">{{ loadText }}</span>
                        </td>
                    </tr>
                </template>
                <template v-else-if="tdata.length === 0">
                    <tr :class="$style.btrItem">
                        <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center">
                            <slot name="no-data-text">{{noDataText}}</slot>
                        </td>
                    </tr>
                </template>
                <template v-else v-for="(row, index) in tdata">
                    <tr :class="[$style.btrItem, rowClsName(index)]" @click="rowClick(row,index)">
                        <td v-for="(column, cindex) in columns" :class="$style.btdSpan" :border="border" :selection="column.type==='selection'" :hide="isXScroll || border">
                            <span v-if="column.type === 'selection'">
                                <u-checkbox v-model="row.selected" :disabled="row.disabled"  @check="changeSelect(row)" />
                            </span>
                            <template v-else-if="column.$scopedSlots.default || column.$slots.default">
                                <u-table-view-cell :row="row" :column="column" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title></u-table-view-cell>
                            </template>
                            <span v-else-if="column.formatter" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title="column.formatter(row, column, index, cindex)">{{column.formatter(row, column, index, cindex) || defaultText}}</span>
                            <span v-else-if="column.type === 'time'" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title="translateTime(row[column.label], column.timeFormat)">{{translateTime(row[column.label], column.timeFormat)}}</span>
                            <span v-else :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title>{{ showContent(column, row[column.label]) }}</span>
                            <span v-if="column.type === 'expand' && showExpandIcon(column, row[column.expandLabel || column.label])" @click="toggleExpand(index, cindex)">
                                <slot name="expandIcon">
                                    <span :class="$style.expand" :role="column.expandIcon" :name="row.iconName"></span>
                                </slot>
                            </span>
                        </td>
                    </tr>
                    <tr :class="$style.btrItem" v-if="row.expanded">
                        <td :colspan="columns.length" :class="$style.btdSpan" :expanded="row.expanded" :border="border" role="center" :hide="isXScroll || border">
                            <u-table-view-cell :row="row" :column="expandedColumn" expand></u-table-view-cell>
                        </td>
                    </tr>
                </template>
                <template v-if="filterTdata && filterTdata.length > limit && tdata.length === limit && pattern === 'limit'">
                    <tr :class="$style.btrItem">
                        <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center" :hide="isXScroll || border">
                            <slot name="limit-text">
                                <u-link @click.native="showAll">{{ limitText }}</u-link>
                            </slot>
                        </td>
                    </tr>
                </template>
                <template v-else-if="filterTdata && filterTdata.length === tdata.length && tdata.length > limit && pattern === 'limit'">
                    <tr :class="$style.btrItem">
                        <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center" :hide="isXScroll || border">
                            <slot name="all-text">
                                <u-link @click.native="showLimit">{{ allText }}</u-link>
                            </slot>
                        </td>
                    </tr>
                </template>
                <template v-else-if="tdata.length === limit && copyTdata.length > limit && pattern === 'limit'">
                    <tr :class="$style.btrItem">
                        <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center" :hide="isXScroll || border">
                            <slot name="limit-text">
                                <u-link @click.native="showAll">{{ limitText }}</u-link>
                            </slot>
                        </td>
                    </tr>
                </template>
                <template v-else-if="copyTdata.length === tdata.length && tdata.length > limit && pattern === 'limit'">
                    <tr :class="$style.btrItem">
                        <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center" :hide="isXScroll || border">
                            <slot name="all-text">
                                <u-link @click.native="showLimit">{{ allText }}</u-link>
                            </slot>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </template>
    <template v-else>
        <div :class="$style.header" ref="head" :role="isXScroll || fixedLeftColumns.length > 0 || fixedRightColumns.length > 0">
            <table :class="$style.thead" ref="thead" cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth, tableLayout: layout}">
                <colgroup>
                    <col v-for="(column, index) in columns" :width="columnsWidth[index] || column.currentWidth"></col>
                </colgroup>
                <thead v-if="showHeader">
                    <tr :class="$style.htrItem" :color="color">
                        <th v-for="(column, index) in columns"  :class="[$style.hthSpan, column.headClass]" :border="border" :role="column.filter || column.sortable" :selection="column.type==='selection'"
                            @click.stop="handleSort(column)">
                            <template v-if="column.type === 'selection' && column.headSelection">
                                <u-checkbox v-model="allSel" :disabled="allDisabled" @check="allSelected" />
                            </template>
                            <span v-if="!column.filter" :class="$style.itemtitle">
                                <template v-if="!column.$slots.headerTitle">{{ column.title }}</template>
                                <template v-else>
                                    <u-table-view-cell :class="$style.ditem" :column="column" text></u-table-view-cell>
                                </template>
                            </span>
                            <template v-else-if="column.filter">
                                <u-popper trigger="click" ref="popper" :placement="column.placement" append-to="body">
                                    <div :class="$style.filtertitle" :role="column.filter">
                                        <span :class="$style.titleitem">{{column.title}}</span>
                                        <div :class="$style.traingle"></div>
                                    </div>
                                    <div :class="$style.popper" slot="popper" :style="{width: columnsWidth[index] + 'px'}">
                                        <div :class="$style.option" v-for="option in column.options" @click.stop="select(option, column, index)" :role="column.selectValue === option.value">{{option.name}}</div>
                                    </div>
                                </u-popper>
                            </template>
                            <template v-if="column.sortable">
                                <span :class="$style.wrapicon">
                                    <u-icon :class="$style.icon" name="arrow-up" v-if="currentSort.order === 'asc' && currentSort.title === column.title" :role="currentSort.title === column.title"
                                        @click.native="handleSort('asc', column)"></u-icon>
                                    <u-icon :class="$style.icon" name="arrow-down" v-else :role="currentSort.title === column.title" @click.native="handleSort('desc', column)"></u-icon>
                                </span>
                            </template>
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
        <div :class="$style.body" :style="{height: bodyHeight+'px', maxHeight: maxBodyHeight+'px', minHeight: minBodyHeight+'px', overflowX: isXScroll ? 'scroll' : 'visible', overflowY: isYScroll ? 'scroll' : 'visible' }" @scroll="bodyScroll">
            <table cellspacing="0" ref="body" cellpadding="0" border="0" :class="$style.tbody" :style="{width: bodyWidth, tableLayout: layout}">
                <colgroup>
                    <col v-for="(column, index) in columns" :width="column.currentWidth || columnsWidth[index]">
                </colgroup>
                <tbody :class="$style.btbody" :no-show-header="!showHeader">
                    <template v-if="loading">
                        <tr :class="$style.btrItem" :hover="fixedHover">
                            <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center">
                                <u-loading></u-loading>
                                <span :class="$style.loadText">{{ loadText }}</span>
                            </td>
                        </tr>
                    </template>
                    <template v-else-if="tdata.length === 0">
                        <tr :class="$style.btrItem" :hover="fixedHover">
                            <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center">
                                <slot name="no-data-text">{{noDataText}}</slot>
                            </td>
                        </tr>
                    </template>
                    <template v-else v-for="(row, index) in tdata">
                        <tr :class="[$style.btrItem, rowClsName(index)]" :hover="row.hover" @click="rowClick(row,index)">
                            <td v-for="(column, cindex) in columns" :class="$style.btdSpan" :border="border" :selection="column.type==='selection'" :hide="isXScroll || border">
                                <span v-if="column.type === 'selection'">
                                    <u-checkbox v-model="row.selected" :disabled="row.disabled" @check="changeSelect(row)" />
                                </span>
                                <template v-else-if="column.$scopedSlots.default || column.$slots.default">
                                    <u-table-view-cell :row="row" :column="column" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title></u-table-view-cell>
                                </template>
                                <span v-else-if="column.formatter" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title="column.formatter(row, column, index, cindex)">{{column.formatter(row, column, index, cindex) || defaultText}}</span>
                                <span v-else-if="column.type === 'time'" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title="translateTime(row[column.label], column.timeFormat)">{{translateTime(row[column.label], column.timeFormat)}}</span>
                                <span v-else :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title>{{ showContent(column, row[column.label]) }}</span>
                                <span v-if="column.type === 'expand' && showExpandIcon(column, row[column.expandLabel || column.label])" @click="toggleExpand(index, cindex)">
                                    <slot name="expandIcon">
                                        <span :class="[$style.expand, column.expandClass]" :role="column.expandIcon" :name="row.iconName"></span>
                                    </slot>
                                </span>
                            </td>
                        </tr>
                        <tr :class="$style.btrItem" v-if="row.expanded">
                            <td :colspan="columns.length" :class="$style.btdSpan" :expanded="row.expanded" :border="border" role="center" :hide="isXScroll || border">
                                <u-table-view-cell :row="row" :column="expandedColumn" expand></u-table-view-cell>
                            </td>
                        </tr>
                    </template>
                    <template v-if="filterTdata && filterTdata.length > limit && tdata.length === limit && pattern === 'limit'">
                        <tr :class="$style.btrItem">
                            <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center" :hide="isXScroll || border">
                                <slot name="limit-text">
                                    <u-link @click.native="showAll">{{ limitText }}</u-link>
                                </slot>
                            </td>
                        </tr>
                    </template>
                    <template v-else-if="filterTdata && filterTdata.length === tdata.length && tdata.length > limit && pattern === 'limit'">
                        <tr :class="$style.btrItem">
                            <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center" :hide="isXScroll || border">
                                <slot name="all-text">
                                    <u-link @click.native="showLimit">{{ allText }}</u-link>
                                </slot>
                            </td>
                        </tr>
                    </template>
                    <template v-else-if="tdata.length === limit && copyTdata.length > limit && pattern === 'limit'">
                        <tr :class="$style.btrItem">
                            <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center" :hide="isXScroll || border">
                                <slot name="limit-text">
                                    <u-link @click.native="showAll">{{ limitText }}</u-link>
                                </slot>
                            </td>
                        </tr>
                    </template>
                    <template v-else-if="copyTdata.length === tdata.length && tdata.length > limit && pattern === 'limit'">
                        <tr :class="$style.btrItem">
                            <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center" :hide="isXScroll || border">
                                <slot name="all-text">
                                    <u-link @click.native="showLimit">{{ allText }}</u-link>
                                </slot>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
        <div :class="$style.fixLeft" v-if="fixedLeftColumns.length" :style="{width: fixedLeftWidth + 'px'}">
            <div :class="$style.header" :role="fixedLeftColumns.length > 0">
                <table :class="$style.thead" cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth, tableLayout: layout}">
                    <colgroup>
                        <col v-for="(column, index) in columns" :width="columnsWidth[index] || column.currentWidth"></col>
                    </colgroup>
                    <thead v-if="showHeader">
                        <tr :class="$style.htrItem" :color="color">
                            <th v-for="(column, index) in columns" :class="[$style.hthSpan, column.headClass]" :border="border" :role="column.filter || column.sortable" :selection="column.type==='selection'"
                                @click.stop="handleSort(column)">
                                <template v-if="column.type === 'selection' && column.headSelection">
                                    <u-checkbox v-model="allSel" @check="allSelected" />
                                </template>
                                <span v-if="!column.filter" :class="$style.itemtitle">
                                    <template v-if="!column.$slots.headerTitle">{{ column.title }}</template>
                                <template v-else>
                                    <u-table-view-cell :class="$style.ditem" :column="column" text></u-table-view-cell>
                                </template>
                                </span>
                                <template v-else-if="column.filter">
                                    <u-popper trigger="click" ref="popper" :placement="column.placement" append-to="body">
                                        <div :class="$style.filtertitle" :role="column.filter">
                                            <span :class="$style.titleitem">{{column.title}}</span>
                                            <div :class="$style.traingle"></div>
                                        </div>
                                        <div :class="$style.popper" slot="popper" :style="{width: columnsWidth[index] + 'px'}">
                                            <div :class="$style.option" v-for="option in column.options" @click.stop="select(option, column, index)" :role="column.selectValue === option.value">{{option.name}}</div>
                                        </div>
                                    </u-popper>
                                </template>
                                <template v-if="column.sortable">
                                    <span :class="$style.wrapicon">
                                        <u-icon :class="$style.icon" name="arrow-up" v-if="currentSort.order === 'asc' && currentSort.title === column.title" :role="currentSort.title === column.title"
                                            @click.native="handleSort('asc', column)"></u-icon>
                                        <u-icon :class="$style.icon" name="arrow-down" v-else :role="currentSort.title === column.title" @click.native="handleSort('desc', column)"></u-icon>
                                    </span>
                                </template>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div :class="$style.body" id="lefttable" ref="lefttable" :style="{height: fixedTableHeight+'px', maxHeight: fixedMaxTableHeight+'px', minHeight: fixedMinTableHeight+'px'}" role="fixed">
                <table cellspacing="0" cellpadding="0" border="0" :class="$style.tbody" :style="{width: bodyWidth, tableLayout: layout}">
                    <colgroup>
                        <col v-for="(column, index) in columns" :width="column.currentWidth || columnsWidth[index]">
                    </colgroup>
                    <tbody :class="$style.btbody" :no-show-header="!showHeader">
                        <template v-if="loading">
                            <tr :class="$style.btrItem" @mouseover="fixmouseover(-1)" @mouseleave="fixmouseleave(-1)">
                                <td :colspan="columns.length" :class="$style.btdSpan" role="center">
                                    <u-loading></u-loading>
                                    <span :class="$style.loadText">{{ loadText }}</span>
                                </td>
                            </tr>
                        </template>
                        <template v-else-if="tdata.length === 0">
                            <tr :class="$style.btrItem" @mouseover="fixmouseover(-1)" @mouseleave="fixmouseleave(-1)">
                                <td :colspan="columns.length" :class="$style.btdSpan" role="center">
                                    <span :class="$style.fixNoText"></span>
                                </td>
                            </tr>
                        </template>
                        <template v-else v-for="(row, index) in tdata">
                            <tr :class="$style.btrItem" @click="rowClick(row,index)" @mouseover="fixmouseover(index)" @mouseleave="fixmouseleave(index)">
                                <td v-for="(column, cindex) in columns" :class="$style.btdSpan" :border="border" :selection="column.type==='selection'" :hide="isXScroll || border">
                                    <span v-if="column.type === 'selection'">
                                        <u-checkbox v-model="row.selected" :disabled="row.disabled" @check="changeSelect(row)" />
                                    </span>
                                    <template v-else-if="column.$scopedSlots.default">
                                        <u-table-view-cell :row="row" :column="column" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title></u-table-view-cell>
                                    </template>
                                    <span v-else-if="column.formatter" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title="column.formatter(row, column, index, cindex)">{{column.formatter(row, column, index, cindex) || defaultText}}</span>
                                    <span v-else-if="column.type === 'time'" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title="translateTime(row[column.label], column.timeFormat)">{{translateTime(row[column.label], column.timeFormat)}}</span>
                                    <span v-else :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title>{{ showContent(column, row[column.label]) }}</span>
                                    <span v-if="column.type === 'expand' && showExpandIcon(column, row[column.expandLabel || column.label])" @click="toggleExpand(index, cindex)">
                                        <slot name="expandIcon">
                                            <span :class="$style.expand" :role="column.expandIcon" :name="row.iconName"></span>
                                        </slot>
                                    </span>
                                </td>
                            </tr>
                            <tr :class="$style.btrItem" v-if="row.expanded">
                                <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center" :hide="isXScroll || border">
                                    <u-table-view-cell :row="row" :column="expandedColumn" expand></u-table-view-cell>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
        <div :class="$style.fixRight" v-if="fixedRightColumns.length" :style="{width: fixedRightWidth + 'px', right: isYScroll ? scrollWidth + 'px' : 0 }">
            <div :class="$style.header" :role="fixedRightColumns.length > 0" :style="{width: isYScroll ? (fixedRightWidth + scrollWidth) + 'px' : '' }">
                <table :class="$style.thead" cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth, tableLayout: layout}">
                    <colgroup>
                        <col v-for="(column, index) in rightColumns" :width="rightColumnsWidth[index] || column.currentWidth"></col>
                    </colgroup>
                    <thead v-if="showHeader">
                        <tr :class="$style.htrItem" :color="color">
                            <th v-for="(column, index) in rightColumns" :class="[$style.hthSpan, column.headClass]" :border="border" :role="column.filter || column.sortable" :selection="column.type==='selection'"
                                @click.stop="handleSort(column)">
                                <template v-if="column.type === 'selection' && column.headSelection">
                                    <u-checkbox v-model="allSel" @check="allSelected" />
                                </template>
                                <span v-if="!column.filter" :class="$style.itemtitle">
                                    <template v-if="!column.$slots.headerTitle">{{ column.title }}</template>
                                <template v-else>
                                    <u-table-view-cell :class="$style.ditem" :column="column" text></u-table-view-cell>
                                </template>
                                </span>
                                <template v-else-if="column.filter">
                                    <u-popper trigger="click" ref="popper" :placement="column.placement" append-to="body">
                                        <div :class="$style.filtertitle" :role="column.filter">
                                            <span :class="$style.titleitem">{{column.title}}</span>
                                            <div :class="$style.traingle"></div>
                                        </div>
                                        <div :class="$style.popper" slot="popper" :style="{width: columnsWidth[index] + 'px'}">
                                            <div :class="$style.option" v-for="option in column.options" @click.stop="select(option, column, index)" :role="column.selectValue === option.value">{{option.name}}</div>
                                        </div>
                                    </u-popper>
                                </template>
                                <template v-if="column.sortable">
                                    <span :class="$style.wrapicon">
                                        <u-icon :class="$style.icon" name="arrow-up" v-if="currentSort.order === 'asc' && currentSort.title === column.title" :role="currentSort.title === column.title"
                                            @click.native="handleSort('asc', column)"></u-icon>
                                        <u-icon :class="$style.icon" name="arrow-down" v-else :role="currentSort.title === column.title" @click.native="handleSort('desc', column)"></u-icon>
                                    </span>
                                </template>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div :class="$style.body" id="righttable" ref="righttable" :style="{height: fixedTableHeight+'px', maxHeight: fixedMaxTableHeight+'px', minHeight: fixedMinTableHeight+'px'}" role="fixed">
                <table cellspacing="0" cellpadding="0" border="0" :class="$style.tbody" :style="{width: bodyWidth, tableLayout: layout}">
                    <colgroup>
                        <col v-for="(column, index) in rightColumns" :width="column.fixedWidth || column.currentWidth || columnsWidth[index]">
                    </colgroup>
                    <tbody :class="$style.btbody" :no-show-header="!showHeader">
                        <template v-if="loading">
                            <tr :class="$style.btrItem" @mouseover="fixmouseover(-1)" @mouseleave="fixmouseleave(-1)">
                                <td :colspan="columns.length" :class="$style.btdSpan" role="center">
                                    <u-loading></u-loading>
                                    <span :class="$style.loadText">{{ loadText }}</span>
                                </td>
                            </tr>
                        </template>
                        <template v-else-if="tdata.length === 0">
                            <tr :class="$style.btrItem" @mouseover="fixmouseover(-1)" @mouseleave="fixmouseleave(-1)">
                                <td :colspan="columns.length" :class="$style.btdSpan" role="center">
                                    <span :class="$style.fixNoText"></span>
                                </td>
                            </tr>
                        </template>
                        <template v-else v-for="(row, index) in tdata">
                            <tr :class="$style.btrItem" @click="rowClick(row,index)" @mouseover="fixmouseover(index)" @mouseleave="fixmouseleave(index)">
                                <td v-for="(column, cindex) in rightColumns" :class="$style.btdSpan" :border="border" :selection="column.type==='selection'">
                                    <span v-if="column.type === 'selection'">
                                        <u-checkbox v-model="row.selected" :disabled="row.disabled" @check="changeSelect(row)" />
                                    </span>
                                    <template v-else-if="column.$scopedSlots.default">
                                        <u-table-view-cell :row="row" :column="column" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title></u-table-view-cell>
                                    </template>
                                    <span v-else-if="column.formatter" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title="column.formatter(row, column, index, cindex)">{{column.formatter(row, column, index, cindex) || defaultText}}</span>
                                    <span v-else-if="column.type === 'time'" :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title="translateTime(row[column.label], column.timeFormat)">{{translateTime(row[column.label], column.timeFormat)}}</span>
                                    <span v-else :class="$style.ditem" :role="column.ellipsis" v-ellipsis-title>{{ showContent(column, row[column.label]) }}</span>
                                    <span v-if="column.type === 'expand' && showExpandIcon(column, row[column.expandLabel || column.label])" @click="toggleExpand(index, cindex)">
                                        <slot name="expandIcon">
                                            <span :class="$style.expand" :role="column.expandIcon" :name="row.iconName"></span>
                                        </slot>
                                    </span>
                                </td>
                            </tr>
                            <tr :class="$style.btrItem" v-if="row.expanded">
                                <td :colspan="columns.length" :class="$style.btdSpan" :border="border" role="center">
                                    <u-table-view-cell :row="row" :column="expandedColumn" expand></u-table-view-cell>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </template>
    <div>
        <slot></slot>
    </div>
</div>