<template>
<div>
<el-table
ref="multipleTable"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.5)"
:header-cell-style="header_cell_style"
:row-style="rowStyle"
:cell-style="cellStyle"
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" v-if="selection" width="55">
</el-table-column>
<el-table-column
:prop="item.prop"
:label="item.label"
:width="item.width"
:show-overflow-tooltip="true"
v-for="(item, index) in tableColumn"
:key="index"
>
<template slot-scope="scope">
<!-- 状态时候做判断 -->
<div v-if="item?.status">
<div v-for="(tag,tagi) in item?.status" :key="tagi">
<el-tag size="small" :style="tag?.style" v-if="tag.name === scope.row[item.prop]" >
<span >{{ tag.desc || '...' }}</span>
</el-tag>
</div>
</div>
<div v-else>
<!-- obj数据进行判断 -->
<span :style="item?.style" v-if="item.type === 'Object'">{{
scope.row[item.prop][item.ObjectField] || '...'
}}</span>
<span :style="item?.style" v-else>{{ scope.row[item.prop] || '...' }}</span>
</div>
</template>
</el-table-column>
<!-- 操作模块 -->
<el-table-column
:prop="operation.prop"
:label="operation.label"
:width="operation.width"
fixed="right"
v-if="operation?.isOperation"
>
<template slot-scope="scope">
<el-button
:style="item2?.style"
type="text"
v-for="(item2, index2) in operation.list"
:key="index2"
size="small"
>
<!-- 替换对象 -->
<span @click="operationClick(item2?.replace.event, scope.row)" v-if="item2?.replace && item2?.replace?.judge === scope.row[item2?.replace?.prop]">{{ item2?.replace?.name }}</span>
<span @click="operationClick(item2.event, scope.row)" v-else>{{ item2.name }}</span>
</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
// 加载动画
loading: {
type: Boolean,
default: false
},
// 选中的数据
selectRows: {
type: Array
},
// 表格数据
tableData: {
type: Array
},
// 行列表
tableColumn: {
type: Array
},
// 是否有选择按钮
selection: {
type: Boolean,
default: false
},
// 操作对象
operation: {
type: Object
},
// 头部样式
header_cell_style: {
type: Object,
default: function () {
return {
background: '#C2DBCE',
'text-align': 'center',
color: '#333333',
'font-weight': 'bold'
}
}
},
// 行样式
rowStyle: {
type: Object,
default: function () {
return {
'text-align': 'center'
}
}
},
// 列样式
cellStyle: {
type: Object,
default: function () {
return {
'text-align': 'center'
}
}
}
},
data() {
return {
}
},
methods: {
// 操作点击事件
operationClick(type, row) {
const data = {
type,
item: row
}
this.$emit('click', data)
},
// 选择按钮事件
handleSelectionChange(val) {
this.$emit('handleSelectionChange', val)
}
}
}
</script>
<style>
</style>
使用方法:
data() {
return {
// 对应列数据
tableColumn: [
{
prop: 'taskNumber',
label: '任务编号'
},
{
prop: 'sampleArea',
label: '区域'
},
{
prop: 'sampleNumber',
label: '采样点数量'
},
{
prop: 'reportTime',
label: '上报时间'
},
{
prop: 'taskStatus',
label: '任务状态',
status: [
{
name: 'TO_LASSOED',
style: {
color: '#F82E2E'
},
desc: '待下发'
},
{
name: 'IN_TASK',
style: {
color: '#FF0000'
},
desc: '实施中'
},
{
name: 'REJECT',
style: {
color: '#F82E2E'
},
desc: '已拒绝'
},
{
name: 'LASSOED',
style: {
color: '#67C23A'
},
desc: '下发中'
},
{
name: 'REPORTING',
style: {
color: '#409EFF'
},
desc: '上报中'
},
{
name: 'COMPLETED',
style: {
color: '#E4820E'
},
desc: '已完成'
}
]
},
{
prop: 'samplingRange',
label: '采样范围(m)'
},
{
prop: 'remark',
label: '备注'
}
],
// 表单其他操作
operation: {
prop: 'operation',
label: '操作',
isOperation: true,
list: [
{
name: '下发',
event: 'Issued',
replace: {
prop: 'taskStatus',
name: '撤回',
event: 'withdraw',
judge: 'LASSOED'
}
},
{
name: '删除',
event: 'delete',
style: {
color: '#F82E2E'
}
}
]
},
// 请求参数
paramsData: {
enable: 'ENABLE',
limit: 8,
page: 1,
samplingProjectId: '',
sampleArea: ''
},
// 总数
total: 0,
// 表格传入数据
tableData: [],
// 多选选择的值
multipleData: [],
// 选中的数据
selectRows: []
}
},
效果图: