基础表格(修改表头及移除默认hover事件)
<template>
<el-table
class="table-wrapper"
:data="tableList"
border
style="width: 100%"
:header-cell-class-name="addHeaderClass"
:cell-class-name="addCellClass"
>
<el-table-column prop="test" label="活动名" align="center">
</el-table-column>
<el-table-column prop="test" label="项目" align="center">
</el-table-column>
<el-table-column prop="test" label="品牌" align="center">
</el-table-column>
<el-table-column prop="test" label="创建人" align="center">
</el-table-column>
<el-table-column prop="test" label="创建时间" align="center">
</el-table-column>
<el-table-column prop="test" label="最后一次更新时间" align="center">
</el-table-column>
<el-table-column prop="test" label="状态" align="center">
</el-table-column>
<el-table-column prop="test" label="操作" align="center">
<template slot-scope="scope">
<div class="operate-box">
<div @click="handleEdit(scope.row)">编辑</div>
<div @click="beforeHandleDelete(scope.row)">删除</div>
</div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
props: {
tableList: {
type: Array,
default() {
return '';
}
}
},
data() {
return {};
},
methods: {
handleEdit(){
},
beforeHandleDelete(){
},
handleDelete(){
},
addHeaderClass() {
return ''
},
addCellClass(){
return ''
}
}
};
</script>
<style scoped>
.operate-box {
display: flex;
justify-content: space-around;
align-items: center;
}
.operate-box div {
width: 86px;
height: 26px;
line-height: 26px;
border-radius: 4px;
cursor: pointer;
}
.table-wrapper >>> thead tr th {
border-right: 0;
}
.table-wrapper >>> th {
font-weight: normal;
}
.table-wrapper >>> tbody tr:hover > td {
background-color: transparent !important;
}
</style>