<template>

<div class="el-data-table">

<template v-if="showNoData">

<!--@slot 获取数据为空时的内容-->

<slot name="no-data"></slot>

</template>

<template v-else>

<!-- 搜索字段 -->

<!-- @submit.native.prevent -->

<!-- 阻止表单提交的默认行为 -->

<!-- https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2 -->

<el-form-renderer

v-if="hasSearchForm"

ref="searchForm"

:content="_searchForm"

inline

class="search-form-container"

@submit.native.prevent

>

<slot

v-for="slot in searchLocatedSlotKeys"

:slot="slot.replace('search:', 'id:')"

:name="slot"

/>

<!--@slot 额外的搜索内容, 当searchForm不满足需求时可以使用-->

<slot name="search"></slot>

<el-form-item>

<!--https://github.com/ElemeFE/element/pull/5920-->

<el-button

native-type="submit"

type="primary"

:size="buttonSize"

@click="search"

>查询</el-button

>

<el-button :size="buttonSize" @click="resetSearch">重置</el-button>

</el-form-item>

</el-form-renderer>

<el-form v-if="hasHeader">

<el-form-item class="header-button-container">

<el-button

v-if="hasNew"

type="primary"

:size="buttonSize"

@click="onDefaultNew"

>{{ newText }}</el-button

>

<template v-for="(btn, i) in headerButtons">

<self-loading-button

v-if="'show' in btn ? btn.show(selected) : true"

:key="i"

:disabled="'disabled' in btn ? btn.disabled(selected) : false"

:click="btn.atClick"

:params="selected"

:callback="getList"

:size="buttonSize"

v-bind="btn"

>

{{

typeof btn.text === 'function' ? btn.text(selected) : btn.text

}}

</self-loading-button>

</template>

<el-button

v-if="hasSelect && hasDelete"

type="danger"

:size="buttonSize"

:disabled="selected.length === 0 || (single && selected.length > 1)"

@click="onDefaultDelete(single ? selected[0] : selected)"

>{{ deleteText }}</el-button

>

<!--@slot 额外的header内容, 当headerButtons不满足需求时可以使用，传入selected -->

<slot name="header" :selected="selected" />

<!--@collapse 自定义折叠按钮, 默认的样式文案不满足时可以使用。传入当前折叠状态 isSearchCollapse: Boolean -->

<slot name="collapse" :isSearchCollapse="isSearchCollapse">

<el-button

v-if="canSearchCollapse"

type="default"

:size="buttonSize"

:icon="`el-icon-arrow-${isSearchCollapse ? 'down' : 'up'}`"

@click="isSearchCollapse = !isSearchCollapse"

>{{ isSearchCollapse ? '展开' : '折叠' }}搜索</el-button

>

</slot>

</el-form-item>

</el-form>

<el-table

ref="table"

v-loading="loading"

v-bind="tableAttrs"

:data="data"

:row-class-name="rowClassName"

v-on="tableEventHandlersInner"

@selection-change="selectStrategy.onSelectionChange"

@select="selectStrategy.onSelect"

@select-all="selectStrategy.onSelectAll($event, selectable)"

>

<!--TODO 不用jsx写, 感觉template逻辑有点不清晰了-->

<template v-if="isTree">

<!--有多选-->

<template v-if="hasSelect">

<el-data-table-column

key="selection-key"

v-bind="{align: columnsAlign, ...columns[0]}"

/>

<el-data-table-column

key="tree-ctrl"

v-bind="{align: columnsAlign, ...columns[1]}"

>

<template slot-scope="scope">

<span

v-for="space in scope.row._level"

:key="space"

class="ms-tree-space"

/>

<span

v-if="iconShow(scope.$index, scope.row)"

class="tree-ctrl"

@click="toggleExpanded(scope.$index)"

>

<i

:class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`"

/>

</span>

{{ scope.row[columns[1].prop] }}

</template>

</el-data-table-column>

<el-data-table-column

v-for="col in columns.filter((c, i) => i !== 0 && i !== 1)"

:key="col.prop"

v-bind="{align: columnsAlign, ...col}"

/>

</template>

<!--无选择-->

<template v-else>

<!--展开这列, 丢失 el-data-table-column属性-->

<el-data-table-column

key="tree-ctrl"

v-bind="{align: columnsAlign, ...columns[0]}"

>

<template slot-scope="scope">

<span

v-for="space in scope.row._level"

:key="space"

class="ms-tree-space"

/>

<span

v-if="iconShow(scope.$index, scope.row)"

class="tree-ctrl"

@click="toggleExpanded(scope.$index)"

>

<i

:class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`"

/>

</span>

{{ scope.row[columns[0].prop] }}

</template>

</el-data-table-column>

<el-data-table-column

v-for="col in columns.filter((c, i) => i !== 0)"

:key="col.prop"

v-bind="{align: columnsAlign, ...col}"

/>

</template>

</template>

<!--非树-->

<template v-else>

<el-data-table-column

v-for="col in columns"

:key="col.prop"

v-bind="{align: columnsAlign, ...col}"

/>

</template>

<!--默认操作列-->

<el-data-table-column

v-if="hasOperation"

label="操作"

v-bind="{align: columnsAlign, ...operationAttrs}"

>

<template slot-scope="scope">

<self-loading-button

v-if="isTree && hasNew"

type="primary"

:size="operationButtonType === 'text' ? '' : buttonSize"

:is-text="operationButtonType === 'text'"

@click="onDefaultNew(scope.row)"

>

{{ newText }}

</self-loading-button>

<self-loading-button

v-if="hasEdit"

type="primary"

:size="operationButtonType === 'text' ? '' : buttonSize"

:is-text="operationButtonType === 'text'"

@click="onDefaultEdit(scope.row)"

>

{{ editText }}

</self-loading-button>

<self-loading-button

v-if="hasView"

type="primary"

:size="operationButtonType === 'text' ? '' : buttonSize"

:is-text="operationButtonType === 'text'"

@click="onDefaultView(scope.row)"

>

{{ viewText }}

</self-loading-button>

<template v-for="(btn, i) in extraButtons">

<self-loading-button

v-if="'show' in btn ? btn.show(scope.row) : true"

:key="i"

:is-text="operationButtonType === 'text'"

v-bind="btn"

:click="btn.atClick"

:params="scope.row"

:callback="getList"

:disabled="'disabled' in btn ? btn.disabled(scope.row) : false"

>

{{

typeof btn.text === 'function'

? btn.text(scope.row)

: btn.text

}}

</self-loading-button>

</template>

<self-loading-button

v-if="!hasSelect && hasDelete && canDelete(scope.row)"

type="danger"

:size="operationButtonType === 'text' ? '' : buttonSize"

:is-text="operationButtonType === 'text'"

@click="onDefaultDelete(scope.row)"

>

{{ deleteText }}

</self-loading-button>

<!--@slot 自定义操作列, 当extraButtons不满足需求时可以使用。传入 row -->

<slot name="operation" :row="scope.row" />

</template>

</el-data-table-column>

<!--@slot 默认slot，同 el-table -->

<slot />

</el-table>

<el-pagination

v-if="hasPagination"

:current-page="page"

:page-sizes="paginationSizes"

:page-size="size"

:total="total"

style="text-align: right; padding: 10px 0;"

:layout="paginationLayout"

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

/>

<the-dialog

ref="dialog"

:new-title="dialogNewTitle"

:edit-title="dialogEditTitle"

:view-title="dialogViewTitle"

:form="dialogForm || form"

:form-attrs="formAttrs"

:dialog-attrs="dialogAttrs"

:button-size="buttonSize"

@confirm="onConfirm"

>

<template v-slot="scope">

<!-- @slot 表单作用域插槽。当编辑、查看时传入row；新增时row=null -->

<slot name="form" :row="scope.row" />

</template>

</the-dialog>

</template>

</div>

</template>

<script>