<template>
|
<div class="Table">
|
<el-table ref="multipleTable" :data="tableData" style="width: 100%"
|
:header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
|
:row-class-name="tableRowClassName">
|
<el-table-column type="selection" :min-width="5">
|
</el-table-column>
|
<el-table-column v-for="(item,idx) in option.group" :key="item.prop" :label="item.label" :prop="item.prop"
|
:min-width="item['min-width'] ? item['item.min-width']:'10'">
|
<template slot-scope="scope">
|
<div v-if="item.type === 'text'">
|
{{scope.row[item.prop]}}
|
</div>
|
<div v-else class="operationBox">
|
<div class="divider" v-for="(child,index) in item.children" :key="child.operationName">
|
<span @click="backMykey(scope.$index,child.mykey)">{{child.operationName}}</span>
|
<el-divider direction="vertical" v-if="index !== item.children.length-1"></el-divider>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
<script>
|
import { deepClone } from '@/utils/helper';
|
export default {
|
data() {
|
return {
|
|
}
|
},
|
props: {
|
tableData: {
|
type: Array,
|
dafault: () => [],
|
},
|
tableOption: {
|
type: Object,
|
default: () => { }
|
},
|
openDialog:{
|
type:Function,
|
default:()=>{()=>{console.log(1)}}
|
}
|
},
|
computed: {
|
option() {
|
return deepClone(this.tableOption);
|
}
|
},
|
methods: {
|
// 设置表格斑马纹
|
tableRowClassName({ row, rowIndex }) {
|
if ((rowIndex + 1) % 2 == 0) {
|
return 'warning-row';
|
} else {
|
return 'success-row';
|
}
|
return '';
|
},
|
// 获取点击的关键字
|
backMykey(index,value){
|
this.$emit('openDialog',{index,mykey:value})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.Table {
|
width: 100%;
|
.el-table{
|
color: #4b9bb7;
|
}
|
&::v-deep .warning-row {
|
background-color: #06122c;
|
}
|
|
&::v-deep .success-row {
|
background-color: #071f39;
|
}
|
.operationBox{
|
display: flex;
|
}
|
.el-divider{
|
background-color: #4b9bb7;
|
}
|
}
|
</style>
|
