|
|
|
@ -7,7 +7,8 @@
|
|
|
|
|
v-loading="loading" |
|
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
|
border |
|
|
|
|
height="600" |
|
|
|
|
height="700" |
|
|
|
|
:row-class-name="tableRowClassName" |
|
|
|
|
> |
|
|
|
|
<el-table-column |
|
|
|
|
:type="column.type == 0 ? 'selection' : ''" |
|
|
|
@ -20,11 +21,15 @@
|
|
|
|
|
:sortable="column.sortable" |
|
|
|
|
v-show="column.head" |
|
|
|
|
> |
|
|
|
|
<!-- <template #header> |
|
|
|
|
<el-text class="mx-1">{{ column.label }}</el-text> |
|
|
|
|
</template> --> |
|
|
|
|
<el-table-column |
|
|
|
|
:width="column.width" |
|
|
|
|
:prop="column.prop" |
|
|
|
|
:label="column.label" |
|
|
|
|
v-if="column.type != 0" |
|
|
|
|
flexible |
|
|
|
|
> |
|
|
|
|
<template #header> |
|
|
|
|
<!-- <el-text class="mx-1">{{ column.label }}</el-text> --> |
|
|
|
@ -40,7 +45,7 @@
|
|
|
|
|
<el-select |
|
|
|
|
v-if="column.type == 3" |
|
|
|
|
v-model="column.values" |
|
|
|
|
class="m-2" |
|
|
|
|
class="m-2 selectbr" |
|
|
|
|
clearable |
|
|
|
|
:placeholder="`请选择${column.label}`" |
|
|
|
|
@change="selectchange($event,column)" |
|
|
|
@ -77,15 +82,18 @@
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #default="scope"> |
|
|
|
|
<el-text class="mx-2" v-if="(Number(column.type)<6&&Number(column.type)>0)&&column.isextrahide">{{ scope.row[column.prop] }}</el-text> |
|
|
|
|
<el-text class="mx-2 tabculconte" v-if="(Number(column.type)<6&&Number(column.type)>0)&&column.isextrahide">{{ scope.row[column.prop] }}</el-text> |
|
|
|
|
<!-- <div v-if="Number(column.type)==8"> |
|
|
|
|
<div></div> |
|
|
|
|
</div> --> |
|
|
|
|
<slot v-if="column.type == 6" :scope="scope"></slot> |
|
|
|
|
<div class="slotbuts" v-if="column.type == 6"> |
|
|
|
|
<slot v-if="column.type == 6" :scope="scope"> |
|
|
|
|
</slot> |
|
|
|
|
</div> |
|
|
|
|
<el-image preview-teleported v-if="column.type==7" style="width: 60px; height: 60px;margin-left: 10px;" :initial-index="index" :z-index="100" v-for="(item,index) in scope.row[column.prop].split(',')" :src="item" :preview-src-list="scope.row[column.prop].split(',')"/> |
|
|
|
|
<el-tooltip placement="top" v-if="(Number(column.type)<6&&Number(column.type)>0)&&!column.isextrahide"> |
|
|
|
|
<template #content>{{ scope.row[column.prop] }}</template> |
|
|
|
|
<div class="on">{{ scope.row[column.prop] }}</div> |
|
|
|
|
<div class="on tabculconte">{{ scope.row[column.prop] }}</div> |
|
|
|
|
</el-tooltip> |
|
|
|
|
<!-- <slot v-if="column.type == 7" name="test" :testdata="scope"></slot> --> |
|
|
|
|
<!-- <el-button |
|
|
|
@ -105,7 +113,7 @@
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
<template #header> |
|
|
|
|
<el-text class="mx-1">{{ column.label }}</el-text> |
|
|
|
|
<el-text class="mx-1 tabtitles">{{ column.label }}</el-text> |
|
|
|
|
<!-- <el-input |
|
|
|
|
v-if="column.type == 2" |
|
|
|
|
v-model="column.values" |
|
|
|
@ -198,6 +206,21 @@ let props = defineProps({
|
|
|
|
|
required: true, |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
let selectarr=ref([]) |
|
|
|
|
const tableRowClassName = ({ |
|
|
|
|
row, |
|
|
|
|
rowIndex, |
|
|
|
|
}: { |
|
|
|
|
row: TableDataType |
|
|
|
|
rowIndex: number |
|
|
|
|
}) => { |
|
|
|
|
if (rowIndex === 1) { |
|
|
|
|
return 'warning-row' |
|
|
|
|
} else if (rowIndex === 3) { |
|
|
|
|
return 'success-row' |
|
|
|
|
} |
|
|
|
|
return '' |
|
|
|
|
} |
|
|
|
|
let emit =defineEmits(['inputTxt','timeCheck','selectCheck','selection']) |
|
|
|
|
let newcolumnList=ref<TableColumnType[]>([]) |
|
|
|
|
watchEffect(()=>{ |
|
|
|
@ -374,7 +397,8 @@ function timechange(value,column:TableColumnType){
|
|
|
|
|
emit('timeCheck',value,column) |
|
|
|
|
} |
|
|
|
|
const handleSelectionChange=(param:TableDataType[])=>{ |
|
|
|
|
console.log(param) |
|
|
|
|
// console.log(param) |
|
|
|
|
selectarr.value=param |
|
|
|
|
emit('selection',param) |
|
|
|
|
} |
|
|
|
|
function inputclear(value,column:TableColumnType){ |
|
|
|
@ -427,15 +451,82 @@ watchEffect(()=>{
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
<style lang="scss"> |
|
|
|
|
.el-table .warning-row { |
|
|
|
|
--el-table-tr-bg-color: var(--el-color-warning-light-9); |
|
|
|
|
} |
|
|
|
|
.el-table .success-row { |
|
|
|
|
--el-table-tr-bg-color: var(--el-color-success-light-9); |
|
|
|
|
// :root{ |
|
|
|
|
// --el-checkbox-checked-bg-color:'#D3832A'; |
|
|
|
|
// --el-checkbox-checked-input-border-color:'#D3832A'; |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.el-table { |
|
|
|
|
//悬停 |
|
|
|
|
--el-table-row-hover-background-color: #f0f9eb !important; |
|
|
|
|
//选中 |
|
|
|
|
--el-table-current-row-background-color: #f0f9eb !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.on{ |
|
|
|
|
overflow: hidden; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
} |
|
|
|
|
.selectbr{ |
|
|
|
|
border: none !important; |
|
|
|
|
} |
|
|
|
|
.tabtitles{ |
|
|
|
|
color: #092C4D !important; |
|
|
|
|
} |
|
|
|
|
.el-table .ascending .sort-caret.ascending{ |
|
|
|
|
border-bottom-color: #D3832A !important; |
|
|
|
|
} |
|
|
|
|
.el-table .descending .sort-caret.descending{ |
|
|
|
|
border-top-color: #D3832A !important; |
|
|
|
|
} |
|
|
|
|
.tabculconte{ |
|
|
|
|
color: #333333 !important; |
|
|
|
|
font-size: 13px; |
|
|
|
|
} |
|
|
|
|
.slotbuts{ |
|
|
|
|
height: 25px; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
.slotbuts .el-text{ |
|
|
|
|
color: #D3832A !important; |
|
|
|
|
margin-right: 10px !important; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:nth-last-child(1){ |
|
|
|
|
margin-right: 0px !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// .el-checkbox__input.is-checked .el-checkbox__inner{ |
|
|
|
|
// background-color: #D3832A !important; |
|
|
|
|
// border-color: #D3832A !important; |
|
|
|
|
// } |
|
|
|
|
// .is .el-checkbox__input.is-checked .el-checkbox__inner{ |
|
|
|
|
// background-color: #D3832A !important; |
|
|
|
|
// border-color: #D3832A !important; |
|
|
|
|
// } |
|
|
|
|
// .is-checked .el-checkbox__inner:hover{ |
|
|
|
|
// border-color: #D3832A !important; |
|
|
|
|
// } |
|
|
|
|
// .el-checkbox__input.is-indeterminate .el-checkbox__inner{ |
|
|
|
|
// background-color: #D3832A !important; |
|
|
|
|
// border-color: #D3832A !important; |
|
|
|
|
// } |
|
|
|
|
.el-checkbox__input.is-checked .el-checkbox__inner, |
|
|
|
|
.el-checkbox__input.is-indeterminate .el-checkbox__inner { |
|
|
|
|
border-color: #D3832A!important; |
|
|
|
|
background-color: #D3832A!important; |
|
|
|
|
} |
|
|
|
|
.el-checkbox__input.is-focus .el-checkbox__inner{ |
|
|
|
|
border-color: #D3832A!important; |
|
|
|
|
} |
|
|
|
|
//修改选中后文本的颜色 |
|
|
|
|
.el-checkbox__input.is-checked+.el-checkbox__label{ |
|
|
|
|
color:#D3832A!important; |
|
|
|
|
} |
|
|
|
|
.el-checkbox__inner:hover{ |
|
|
|
|
border-color: #D3832A!important; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|