You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.1 KiB
85 lines
2.1 KiB
<template>
|
|
<el-table ref="tableRef" row-key="id" :data="props.tableData" :border="true">
|
|
<el-table-column
|
|
v-for="(item, index) in props.tableColumns"
|
|
:key="index"
|
|
:label="item.title"
|
|
:prop="item.prop"
|
|
:sortable="item.sortable"
|
|
:fixed="item.fixed"
|
|
:width="item.width || props.columnWidth"
|
|
:align="item.align || props.columnAlign"
|
|
:header-align="item.headerAlign || props.columnHeaderAlign"
|
|
>
|
|
<template #default="scope">
|
|
<!-- 时间格式 -->
|
|
<span v-if="item.type == 'datetime'"> {{ formatTableDate(scope.row[item.prop]) }} </span>
|
|
<!-- 标签格式 -->
|
|
<el-tag
|
|
v-if="item.type == 'tagFilter'"
|
|
:type="formatTableTagFilter('type',scope.row,item)"
|
|
>
|
|
{{ formatTableTagFilter('label',scope.row,item) }}
|
|
</el-tag>
|
|
<!-- 正常文本 -->
|
|
<span v-else> {{ scope.row[item.prop] }} </span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineOptions({ name: 'elTable' })
|
|
import { reactive, ref, onMounted } from 'vue'
|
|
import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
|
|
import { formatTimeStrToStr } from "@/utils/formatTime";
|
|
|
|
const state = reactive({})
|
|
|
|
const props = defineProps({
|
|
// table数据
|
|
tableData: {
|
|
type: Object,
|
|
default: []
|
|
},
|
|
// table表头
|
|
tableColumns: {
|
|
type: Object,
|
|
default: []
|
|
},
|
|
// 表头宽度
|
|
columnWidth:{
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
// 表头对齐
|
|
columnHeaderAlign:{
|
|
type: String,
|
|
default: 'center'
|
|
},
|
|
// 表内容对齐
|
|
columnAlign:{
|
|
type: String,
|
|
default: 'center'
|
|
},
|
|
})
|
|
|
|
// 格式化时间
|
|
function formatTableDate(time) {
|
|
let _time = '-'
|
|
if (time) { _time = formatTimeStrToStr(time) }
|
|
return _time
|
|
}
|
|
|
|
// 格式化TagFilter
|
|
function formatTableTagFilter(type,row,item){
|
|
let _op = item.options.filter(op=>op.value == row[item.prop])
|
|
if(_op && _op.length > 0){ return _op[0][type] }
|
|
}
|
|
|
|
onMounted(() => {})
|
|
|
|
</script>
|
|
|
|
<style></style>
|
|
|