这里的看似是按钮,实际上是link,是配置好后,循环出来的。想要的效果如果
原本代码类似如下:
colums:[
{
label: '操作',
prop: '',
// width: 190,
operates: [
{
event: 'goSupplement',
text: '详情',
type: 'primary',
code: 'LOOK_DETAIL',
},
{
event: 'goSupplement',
text: '订单下载',
type: 'primary',
code: 'LOOK_DETAIL',
}, {
event: 'goSupplement',
text: '去还款',
type: 'primary',
code: 'LOOK_DETAIL',
},
]
效果:
重点:
直接修改table-page下面的Xtable。
1.寻找到想改变的元素在Xtable的那里,目前项目是在el-link里面
<template class="operate-btn" v-if="item.operates" style="display: flex">
<div
style="display: inline-block"
v-for="(btn, index) in item.operates"
:key="btn.event"
:class="btn.btnClass || ''" 重点直接在这里加calss名
>
<div v-if="!btn.popover">
<div class="btn-cell-box">
<el-link
v-if="$showBtn(btn.code)"
:style="{ display: scope.row.hiddenBtn && scope.row.hiddenBtn.includes(btn.text) ? 'none' : '' }"
:type="btn.type ? btn.type : ''"
@click="handleRowOperate(scope.$index, scope.row, columnIdx, index, btn)"
:underline="false"
:disabled="tableData[scope.$index][`btn` + btn.code]"
>{{ btn.text }}
</el-link>
<div v-if="btnNumber(item.operates, scope.row.hiddenBtn, index)" class="btn-cell-line"></div>
</div>
</div>
</template>
2.在App.vue的style里面进行引用
App.vue
@import '../public/css/table-custom-style.less';
table-custom-style.less
.table-btn-green{
color: #67c23a;
.el-link {
padding: 0 5px !important;
border-radius: 4px;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 14px;
background-color: #f0f9eb;
border-color: #e1f3d8;
color: #67c23a !important;
&.is-disabled {
background-color: #dddddd70;
border-color: #dddddd70;
color: #333 !important;
}
}
}
3.新建table-custom-style.less文件,并给元素配置class名
colums:[
{
label:'操作',
prop:'',
operates:[
{
event: 'goSupplement',
text: '详情',
type: 'primary',
code: 'LOOK_DETAIL',
btnClass: 'table-btn-green '
},
{
event: 'goSupplement',
text: '合同下载',
type: 'primary',
code: 'LOOK_DETAIL',
btnClass: 'table-btn-pink' 在这里配置class名
},
]
}
]