| | |
| | | v-loading="tableLoading" |
| | | :border="border" |
| | | :data="tableData" |
| | | :header-cell-style="{ background: '#0e3372', color: '#cccccc' }" |
| | | :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" |
| | | :height="height" |
| | | :highlight-current-row="highlightCurrentRow" |
| | | :row-class-name="rowClassName" |
| | |
| | | <template> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | </template> |
| | | |
| | | |
| | | <template v-for="(item, index) in column"> |
| | | <el-table-column :column-key="item.columnKey" :filter-method="item.filterHandler" |
| | | :filter-multiple="item.filterMultiple" :filtered-value="item.filteredValue" |
| | |
| | | slot-scope="scope"> |
| | | <slot v-if="item.theadSlot" :index="index" :name="item.theadSlot" :row="scope.row" /> |
| | | </template> |
| | | |
| | | |
| | | <template slot-scope="scope"> |
| | | <!-- 插槽 --> |
| | | <div v-if="item.dataType == 'slot'"> |
| | |
| | | <div v-else-if="item.dataType == 'progress'"> |
| | | <el-progress :percentage="Number(scope.row[item.prop])" /> |
| | | </div> |
| | | |
| | | |
| | | <!-- tag --> |
| | | <div v-else-if="item.dataType == 'tag'"> |
| | | <el-tag v-if="typeof dataTypeFn(scope.row[item.prop], item.formatData) == 'string'" |
| | |
| | | <el-tag v-else :title="scope.row[item.prop] | formatters(item.formatData)" |
| | | :type="formatType(scope.row[item.prop], item.formatType)">{{ scope.row[item.prop] | formatters(item.formatData) }}</el-tag> |
| | | </div> |
| | | |
| | | |
| | | <!-- 按钮 --> |
| | | <div v-else-if="item.dataType == 'action'"> |
| | | <template v-for="(o, key) in item.operation"> |
| | |
| | | <pagination |
| | | v-show="page.total>0" |
| | | :total="page.total" |
| | | :page.sync="page.pageNum" |
| | | :limit.sync="page.pageSize" |
| | | :page.sync="page.current" |
| | | :limit.sync="page.size" |
| | | @pagination="pagination" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | <script> |
| | | // 注:以下是所有配置项,其中最常使用的就是label、width、prop、dataType、slot |
| | | // label :列名,就是表头上的标签叫什么些什么,类型 string |
| | |
| | | }, |
| | | border: { |
| | | type: Boolean, |
| | | default: true |
| | | default: false |
| | | }, |
| | | highlightCurrentRow: { |
| | | type: Boolean, |
| | |
| | | rowClassName: { |
| | | type: Function, |
| | | default: () => { |
| | | |
| | | |
| | | } |
| | | }, |
| | | rowStyle: { |
| | |
| | | default: undefined |
| | | }, |
| | | page:{ |
| | | type:object, |
| | | type:Object, |
| | | default() { |
| | | return { |
| | | total:0, |
| | | pageNum:0, |
| | | pageSize:10 |
| | | current:0, |
| | | size:10 |
| | | }; |
| | | } |
| | | } |
| | | }, |
| | | |
| | | |
| | | methods: { |
| | | formatType(val, format) { |
| | | if (typeof (format) === 'function') { |
| | |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | |
| | | <style scoped> |
| | | .el-table >>> .el-table__empty-text { |
| | | text-align: center |
| | | } |
| | | </style> |
| | | |