| | |
| | | :row-style="rowStyle" |
| | | :row-key="rowKey" |
| | | stripe |
| | | style="width: 100%; " |
| | | style="width: 100%" |
| | | tooltip-effect="dark" |
| | | @row-click="rowClick" |
| | | @current-change="currentChange" |
| | |
| | | </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" |
| | | :filters="item.filters" :fixed="item.fixed" :label="item.label" |
| | | :min-width="item.minWidth" :prop="item.prop" |
| | | <el-table-column |
| | | :column-key="item.columnKey" |
| | | :filter-method="item.filterHandler" |
| | | :filter-multiple="item.filterMultiple" |
| | | :filtered-value="item.filteredValue" |
| | | :filters="item.filters" |
| | | :fixed="item.fixed" |
| | | :label="item.label" |
| | | :min-width="item.minWidth" |
| | | :prop="item.prop" |
| | | :show-overflow-tooltip="item.showOverflowTooltip" |
| | | :sortable="item.sortable ? true : false" :type="item.type" :width="item.width" |
| | | align="center"> |
| | | :sortable="item.sortable ? true : false" |
| | | :type="item.type" |
| | | :width="item.width" |
| | | align="center" |
| | | > |
| | | <!-- <div class="123" v-if="item.type == ''"> --> |
| | | <template v-if="item.hasOwnProperty('colunmTemplate')" :slot="item.colunmTemplate" |
| | | slot-scope="scope"> |
| | | <slot v-if="item.theadSlot" :index="index" :name="item.theadSlot" :row="scope.row" /> |
| | | <template |
| | | v-if="item.hasOwnProperty('colunmTemplate')" |
| | | :slot="item.colunmTemplate" |
| | | 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'"> |
| | | <slot v-if="item.slot" :index="scope.$index" :name="item.slot" :row="scope.row" /> |
| | | <slot |
| | | v-if="item.slot" |
| | | :index="scope.$index" |
| | | :name="item.slot" |
| | | :row="scope.row" |
| | | /> |
| | | </div> |
| | | <!-- 进度条 --> |
| | | <div v-else-if="item.dataType == 'progress'"> |
| | |
| | | |
| | | <!-- tag --> |
| | | <div v-else-if="item.dataType == 'tag'"> |
| | | <el-tag v-if="typeof dataTypeFn(scope.row[item.prop], item.formatData) == 'string'" |
| | | <el-tag |
| | | v-if=" |
| | | typeof dataTypeFn(scope.row[item.prop], item.formatData) == |
| | | 'string' |
| | | " |
| | | :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> |
| | | <el-tag v-for="(tag, index) in dataTypeFn(scope.row[item.prop], item.formatData)" |
| | | v-else-if="typeof dataTypeFn(scope.row[item.prop], item.formatData) == 'object'" |
| | | :key="index" :title="scope.row[item.prop] | formatters(item.formatData)" |
| | | :type="formatType(tag, item.formatType)">{{ item.tagGroup ? tag[item.tagGroup.label] ? tag[item.tagGroup.label] : tag : tag }}</el-tag> |
| | | <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> |
| | | :type="formatType(scope.row[item.prop], item.formatType)" |
| | | >{{ |
| | | scope.row[item.prop] | formatters(item.formatData) |
| | | }}</el-tag |
| | | > |
| | | <el-tag |
| | | v-for="(tag, index) in dataTypeFn( |
| | | scope.row[item.prop], |
| | | item.formatData |
| | | )" |
| | | v-else-if=" |
| | | typeof dataTypeFn(scope.row[item.prop], item.formatData) == |
| | | 'object' |
| | | " |
| | | :key="index" |
| | | :title="scope.row[item.prop] | formatters(item.formatData)" |
| | | :type="formatType(tag, item.formatType)" |
| | | >{{ |
| | | item.tagGroup |
| | | ? tag[item.tagGroup.label] |
| | | ? tag[item.tagGroup.label] |
| | | : tag |
| | | : tag |
| | | }}</el-tag |
| | | > |
| | | <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> |
| | | |
| | | <!-- 按钮 --> |
| | |
| | | v-show="o.showHide ? o.showHide(scope.row) : true" |
| | | :disabled="o.disabled ? o.disabled(scope.row) : false" |
| | | :icon="o.icon | iconFn(scope.row)" |
| | | :plain="o.plain" :size="o.size" |
| | | :style="{ 'color': o.color }" |
| | | :plain="o.plain" |
| | | :size="o.size" |
| | | :style="{ color: o.color }" |
| | | :type="o.type | typeFn(scope.row)" |
| | | @click="o.clickFun(scope.row)"> |
| | | @click="o.clickFun(scope.row)" |
| | | > |
| | | {{ o.name }} |
| | | </el-button> |
| | | <el-upload |
| | | action="#" |
| | | :on-change="(file, fileList)=>o.clickFun(scope.row,file, fileList)" |
| | | :on-change=" |
| | | (file, fileList) => o.clickFun(scope.row, file, fileList) |
| | | " |
| | | :multiple="o.multiple?o.multiple:false" |
| | | :limit="o.limit?o.limit:1" |
| | | :disabled="o.disabled ? o.disabled(scope.row) : false" |
| | | :accept="o.accept?o.accept:'.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'" |
| | | v-if="o.type=='upload'" style="display: inline-block;width: 50px;" |
| | | :accept=" |
| | | o.accept |
| | | ? o.accept |
| | | : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar' |
| | | " |
| | | v-if="o.type == 'upload'" |
| | | style="display: inline-block; width: 50px" |
| | | v-show="o.showHide ? o.showHide(scope.row) : true" |
| | | :auto-upload="false" |
| | | :on-exceed="onExceed" |
| | | :show-file-list="false"> |
| | | <el-button :size="o.size?o.size:'small'" type="text" :disabled="o.disabled ? o.disabled(scope.row) : false">{{o.name}}</el-button> |
| | | :show-file-list="false" |
| | | > |
| | | <el-button |
| | | :size="o.size ? o.size : 'small'" |
| | | type="text" |
| | | :disabled="o.disabled ? o.disabled(scope.row) : false" |
| | | >{{ o.name }}</el-button |
| | | > |
| | | </el-upload> |
| | | </template> |
| | | </div> |
| | | <!-- 默认纯展示数据 --> |
| | | <div v-else> |
| | | <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span> |
| | | <span v-else>{{ scope.row[item.prop] | formatters(item.formatData) }}</span> |
| | | <span v-else>{{ |
| | | scope.row[item.prop] | formatters(item.formatData) |
| | | }}</span> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | // plain:按elementUi 文档为准 |
| | | // clickFun:按钮的回调函数 |
| | | export default { |
| | | name: 'ZTTable', |
| | | name: "ZTTable", |
| | | filters: { |
| | | iconFn(val, row) { |
| | | if (typeof (val) === 'function') { |
| | | if (typeof val === "function") { |
| | | return val(row); |
| | | } else return val; |
| | | }, |
| | | typeFn(val, row) { |
| | | // console.log(val, row, '11111111'); |
| | | if (typeof (val) === 'function') { |
| | | if (typeof val === "function") { |
| | | return val(row); |
| | | } else return val; |
| | | }, |
| | | describeConts(val, describeCont) { |
| | | if (typeof (describeCont) === 'function') { |
| | | if (typeof describeCont === "function") { |
| | | return describeCont(val); |
| | | } else return val; |
| | | }, |
| | | formatters(val, format) { |
| | | if (typeof (format) === 'function') { |
| | | if (typeof format === "function") { |
| | | return format(val); |
| | | } else return val; |
| | | } |
| | | }, |
| | | }, |
| | | props: { |
| | | isSelection: { |
| | | type: Boolean, |
| | | default: false |
| | | default: false, |
| | | }, |
| | | height: { |
| | | type: String, |
| | | default: null |
| | | default: null, |
| | | }, |
| | | tableLoading: { |
| | | type: Boolean, |
| | | default: false |
| | | default: false, |
| | | }, |
| | | handleSelectionChange: { |
| | | type: Function, |
| | | default: () => { |
| | | return () => { |
| | | }; |
| | | } |
| | | return () => {}; |
| | | }, |
| | | }, |
| | | rowClick: { |
| | | type: Function, |
| | | default: () => { |
| | | return () => { |
| | | }; |
| | | } |
| | | return () => {}; |
| | | }, |
| | | }, |
| | | currentChange: { |
| | | type: Function, |
| | | default: () => { |
| | | return () => { |
| | | }; |
| | | } |
| | | return () => {}; |
| | | }, |
| | | }, |
| | | border: { |
| | | type: Boolean, |
| | | default: false |
| | | default: false, |
| | | }, |
| | | highlightCurrentRow: { |
| | | type: Boolean, |
| | | default: false |
| | | default: false, |
| | | }, |
| | | headerCellStyle: { |
| | | type: Object, |
| | | default: () => { |
| | | return {}; |
| | | } |
| | | }, |
| | | }, |
| | | column: { |
| | | type: Array, |
| | | default() { |
| | | return []; |
| | | } |
| | | }, |
| | | }, |
| | | rowClassName: { |
| | | type: Function, |
| | | default: () => { |
| | | |
| | | } |
| | | default: () => {}, |
| | | }, |
| | | rowStyle: { |
| | | type: Object || Function, |
| | | default: () => { |
| | | } |
| | | default: () => {}, |
| | | }, |
| | | tableData: { |
| | | type: Array, |
| | | default() { |
| | | return []; |
| | | } |
| | | }, |
| | | }, |
| | | rowKey: { |
| | | type: String, |
| | | default: undefined |
| | | default: undefined, |
| | | }, |
| | | page:{ |
| | | type:Object, |
| | |
| | | return { |
| | | total:0, |
| | | current:0, |
| | | size:10 |
| | | size: 10, |
| | | }; |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }, |
| | | |
| | | methods: { |
| | | formatType(val, format) { |
| | | if (typeof (format) === 'function') { |
| | | if (typeof format === "function") { |
| | | return format(val); |
| | | } else return ''; |
| | | } else return ""; |
| | | }, |
| | | dataTypeFn(val, format) { |
| | | if (typeof (format) === 'function') { |
| | | if (typeof format === "function") { |
| | | return format(val); |
| | | } else return val; |
| | | }, |
| | |
| | | this.$refs.multipleTable.setCurrentRow(); |
| | | }, |
| | | onExceed(){ |
| | | this.$message.warning('超出文件个数'); |
| | | this.$message.warning("超出文件个数"); |
| | | }, |
| | | pagination(page,limit){ |
| | | this.$emit('pagination',{pageNum: page, pageSize: limit}); |
| | | } |
| | | } |
| | | this.$emit("pagination", { pageNum: page, pageSize: limit }); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .el-table >>> .el-table__empty-text { |
| | | text-align: center |
| | | text-align: center; |
| | | } |
| | | </style> |