Table.html 4.23 KB
<div class="ant-table-wrapper">
    <es-spin spinning="{{loading}}">
        <div class="ant-table ant-table-default">
            <div class="ant-table-content">
                <table>
                    <thead class="ant-table-thead">
                        <tr>
                            <th ng-if="rowSelection" class="ant-table-selection-column">
                                <span class="ant-table-header-column">
                                    <div>
                                        <span class="ant-table-column-title">
                                            <div class="ant-table-selection">
                                                <es-checkbox on-change="handleSelectAll(event)" checked="{{state.isSelectAll}}" />
                                            </div>
                                        </span>
                                    </div>
                                </span>
                            </th>
                            <th ng-repeat="(key, column) in columns track by key" class="ant-table-cell ant-table-column-has-sorters" ng-style="{width:column.width}">
                                    <span ng-if="!column.sorter">{{column.title}}</span>
                                    <div ng-if="column.sorter" class="ant-table-column-sorters" ng-click="handleSorter(column.key)">
                                        <span class="ant-table-column-title">{{column.title}}</span>
                                        <span class="ant-table-column-sorter ant-table-column-sorter-full">
                                            <span class="ant-table-column-sorter-inner">
                                                <es-icon type="CaretUpOutlined" ng-class="'ant-table-column-sorter-up'+(state.sorter.field===column.key&&state.sorter.order==='ascend'?' active':'')"></es-icon>
                                                <es-icon type="CaretDownOutlined" ng-class="'ant-table-column-sorter-down'+(state.sorter.field===column.key&&state.sorter.order==='descend'?' active':'')"></es-icon>
                                            </span>
                                        </span>
                                    </div>
                                </th>
                        </tr>
                    </thead>
                    <tbody class="ant-table-tbody">
                        <tr ng-repeat="(key, record) in state.dataSource track by record[state.rowKey]" class="ant-table-row">
                            <td ng-if="rowSelection" class="ant-table-selection-column">
                                <span>
                                    <es-checkbox checked="record.checked" disabled="record.disabled" on-change="handleSelect(event,$index)" />
                                </span>
                            </td>
                                <td ng-repeat="(key, column) in columns track by key" data-key="{{column.key}}">
                                        <es-slot content="{{record[column.key]}}" context="esTable.getContext().$parent" />
                                    </td>
                        </tr>
                        <tr ng-if="state.dataSource.length===0" class="ant-table-placeholder">
                            <td colspan="{{columns.length}}"><div class="ant-empty ant-empty-normal"><div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fill-rule="evenodd"><ellipse class="ant-empty-img-simple-ellipse" cx="32" cy="33" rx="32" ry="7"></ellipse><g class="ant-empty-img-simple-g" fill-rule="nonzero"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" class="ant-empty-img-simple-path"></path></g></g></svg></div><div class="ant-empty-description">暂无数据</div></div></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </es-spin>
</div>