element UI 穿梭框按钮样式修改

利用Element UI 修改穿梭框的按钮样式

//html部分
   <el-transfer
                                    v-model="FirsttransferVal"
                                    filterable
                                    :filter-method="filterMethod"
                                    filter-placeholder="请输入指标名称"
                                    :titles="['待选指标', '已选指标']"
                                    :button-texts="['删除','添加']"
                                    @change="handleChange"
                                    :props="{key: 'tagName',label: 'tagName'}"
                                    :data="transferData">
                            </el-transfer>

//Js部分
   export default {
        data() { return {filterMethod(query, item) {
                    return item.tagName.indexOf(query) > -1;
                },
                transferData: [
                    {
                        id: "1",
                        key: 1,
                        tagName: "指标1",
                        value: "10",

                    },

                    {
                        id: "2",
                        key: 2,
                        tagName: "指标2",
                        value: "20",

                    },
                ],
                FirsttransferVal: [],
                }
                }
         methods: {
            handleChange(value, direction, movedKeys) {
                console.log(value);
            	},
          }
                  

// CSS样式
<style scoped>
    /deep/ .custonStyle .el-dialog__body {
        border-top: 1px solid #ccc;
    }

    /deep/ .el-transfer {
        display: flex;
    }
    /deep/ .el-button+.el-button{margin-left: 0px;}
    /deep/ .el-button [class*=el-icon-]+span{margin-left: 0px;}
    /deep/ .el-transfer__buttons {

        margin-top: 100px;
        display: block;
    }

    /deep/ .el-transfer__buttons .is-with-texts {
        height: 40px;
        display: block;
        line-height: 40px;
        padding: 0 20px;

    }
</style>