Xtable封装的tablePage的columns的operates的样式修改

这里的看似是按钮，实际上是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名
     },
    ]  
  }
 ]