<template>
<div class="w-data-table" v-loading="tableLoading">
<div class="dt-search" v-if="$slots.search">
<el-form
ref="searchform"
size="mini"
class="dt-search-form-inline"
:inline="true"
:model="searchParams"
@submit.native.prevent="search({ _fromBar: true, _begin: 0 })"
>
<slot name="search" />
<button type="submit" style="display: none;"></button>
</el-form>
</div>
<div
class="dt-toolbar"
v-if="$slots.toolbar || $slots.search || $slots['toolbar-right']"
>
<slot name="toolbar" />
<el-button
v-if="exportable"
size="mini"
type="primary"
icon="el-icon-download"
plain
@click="doExport()"
>
导出
</el-button>
<template v-if="$slots.search">
<el-divider
v-if="($slots.toolbar || exportable) && (showSearch || showReset)"
direction="vertical"
></el-divider>
<el-button
type="primary"
size="mini"
icon="el-icon-search"
plain
v-if="showSearch"
class="search"
@click="search({ _fromBar: true, _begin: 0 })"
>
查询
</el-button>
<el-button
type="default"
size="mini"
icon="el-icon-refresh-left"
plain
v-if="showReset"
class="reset"
@click="clearSearch()"
>
重置
</el-button>
</template>
<template v-if="$slots['toolbar-right']">
<div class="dt-toolbar_right">
<slot name="toolbar-right" />
</div>
</template>
</div>
<el-table
ref="table"
size="medium"
style="width: 100%"
class="dt-table"
header-cell-class-name="header-compact-cell"
cell-class-name="compact-cell"
:highlight-current-row="highlightCurrentRow"
:border="showBorder"
:data="data"
:height="returnHeight || tableHeight"
:row-key="rowKey"
:default-expand-all="defaultExpandAll"
:tree-props="treeProps"
@row-click="clickRow"
@select="onTabelSelect"
@select-all="onTabelSelectAll"
:load="load"
lazy
>
<el-table-column v-if="showSelect" type="selection" width="55">
</el-table-column>
<el-table-column
v-if="showIndex"
type="index"
width="50"
></el-table-column>
<template
v-for="({
hide, render, tag, dict, comp, cols, ...attrs },
index) in column"
>
<template v-if="!hide">
<el-table-column
v-if="attrs.type"
v-bind="{ ...columnAttrs, ...attrs }"
:key="index"
:selectable="checkboxT"
></el-table-column>
<el-table-column
v-else-if="render"
v-bind="{ ...columnAttrs, ...attrs }"
:key="index"
>
<template slot-scope="scope">
<w-render :render="render" :params="scope" :data="data" />
</template>
</el-table-column>
<el-table-column
v-else-if="cols"
v-bind="{ ...columnAttrs, ...attrs }"
:key="index"
>
<template v-for="(cattrs, index) in cols">
<el-table-column
v-bind="{ ...columnAttrs, ...cattrs }"
:key="index"
></el-table-column>
</template>
</el-table-column>
<el-table-column
v-else
v-bind="{ ...columnAttrs, ...attrs }"
:key="index"
>
<template slot-scope="scope">
<template v-if="tag">
<template v-if="tag.dict">
<el-tag size="mini" :type="tag.type(scope)">
<!-- {
{
scope.row[attrs.prop]}} -->
{
{
scope.row[attrs.prop]
| fmtDict(dicts[tag.dict.code || attrs.prop])
}}
</el-tag>
</template>
<template v-else>
<el-tag size="mini" :type="tag.type(scope)">
{
{
tag.text(scope) }}
</el-tag>
</template>
</template>
<template v-else-if="comp">
<component
:is="comp.name"
v-bind="{ ...comp.attr }"
v-on="{ ...comp.on(scope) }"
>
<template v-if="comp.text">{
{
comp.text }}</template>
</component>
</template>
<template v-else-if="dict">
{
{
scope.row[dict.prop || attrs.prop]
| fmtDict(dicts[dict.code || dict.prop])
}}
</template>
<template v-else>
{
{
scope.row[attrs.prop] }}
</template>
elementUI table组件
最新推荐文章于 2024-07-03 11:19:28 发布