123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- <template>
- <div class="container" v-loading="loading">
- <div class="tips-info" v-if="tips">
- <slot name="tips"></slot>
- </div>
- <div v-if="toolbar" class="toolbar">
- <slot name="toolbar"></slot>
- </div>
- <el-table :max-height="height" v-bind="$attrs" v-on="$listeners" ref="table" :data="tableData" :row-key="rowKey" :stripe="stripe"
- :header-cell-style="{ textAlign: 'center' }" :style="{ width: '100%', minHeight: height + 'px' }"
- @selection-change="selectionChange" highlight-current-row>
- <slot name="table-columns"></slot>
- </el-table>
- <div v-if="pagination" class="pagination">
- <div class="pagination-toolbar">
- <slot name="pagination-toolbar"></slot>
- </div>
- <slot name="pagination"></slot>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'EnTableLayout',
- props: {
- /** 是否显示斑纹 */
- stripe: {
- type: Boolean,
- default: true
- },
- /** 行数据的 Key */
- rowKey: {
- type: [String, Function],
- default: null
- },
- /** 是否显示工具栏 */
- toolbar: {
- type: Boolean,
- default: true
- },
- /** 是否显示操作提示 */
- tips: {
- type: Boolean,
- default: false
- },
- /** 是否显示分页 */
- pagination: {
- type: Boolean,
- default: true
- },
- /** 表格数据 */
- tableData: {
- default: function() {
- return []
- }
- },
- /** 加载状态 */
- loading: {
- type: Boolean,
- default: false
- },
- /** 当选择项发生变化 */
- selectionChange: {
- type: Function,
- default: function() {
- return []
- }
- }
- },
- data() {
- return {
- height: `${document.body.clientHeight - 260}`
- }
- }
- }
- </script>
- <style type="text/scss" lang="scss" scoped>
- .container {
- width: 100%;
- height: 100%;
- position: relative;
- background: #e9eef3;
- }
- /** 工具栏样式 */
- .toolbar {
- display: flex;
- align-items: center;
- height: 44px;
- border-bottom: 1px solid #e6ebf5;
- background-color: #fff;
- }
- .inner-toolbar {
- display: flex;
- width: 100%;
- justify-content: space-between;
- padding: 0 20px;
- }
- .toolbar-search {
- margin-right: 10px;
- }
- /** 分页样式 */
- .pagination {
- display: flex;
- justify-content: space-between;
- padding: 5px 20px;
- text-align: right;
- background-color: #ffffff;
- .pagination-toolbar {
- display: flex;
- align-items: center;
- }
- }
- /deep/ .el-table td:not(.is-left) {
- text-align: center;
- }
- /** 操作提示样式 */
- .tips-info {
- background: #fff;
- color: #31708f;
- padding: 1px 10px;
- margin-bottom: 10px;
- border-radius: 4px;
- h4 {
- font-weight: 500;
- margin: 20px 0;
- }
- ul {
- margin: 20px 0;
- padding-left: 40px;
- display: block;
- li {
- font-size: 12px;
- list-style-type: disc;
- }
- }
- }
- </style>
|