美文网首页
elementUI中折叠面板箭头图标位置调整

elementUI中折叠面板箭头图标位置调整

作者: 陶菇凉 | 来源:发表于2021-03-18 09:48 被阅读0次
    image.png

    1.html内容

    <el-collapse accordion>
                <el-collapse-item v-for="(item,index) in 2">
                    <span class="collapse-title flex flex_spb a_c" slot="title">组{{index}}(创建时间2021-1-1,修改时间2021-1-20)
                        <div class="collapse-title-right flex a_c">
                            <span @click.stop="eventsClick(2)">编辑</span>
                          <span class="el-icon-close" @click.stop="eventsClick(3)"></span>
                        </div>
                    </span>
    </el-collapse accordion>
    

    2.css内容

    .el-collapse-item__arrow {
                margin-right: 5px;
                font-size: 18px;
            }
            .el-collapse-item__header {
                background: #D6E6FF;
    /*          border: 1px solid #DCDCDC;*/
                border-left: 2px solid #4B8FFF;
                padding-left: 20px;
            }
            .collapse-title {
                flex: 1 0 90%;
                order: 1;
            }
            .el-collapse-item__header {
                flex: 1 0 auto;
                order: -1;
            }
            .collapse-title-right{
                & span:first-child{
                    color: #0E64F1;
                    margin-right: 20px;
                    cursor: pointer;
                }
                & span:last-child{
                    color: #D60000;
                    cursor: pointer;
                    margin-right: 20px;
                    font-size: 20px;
                }
            }
            .el-collapse-item__content{
                padding: 0 0 0 20px;
            }
            .operate{
            span{
                color: #0E64F1;
                cursor: pointer;
            }
            i{
                margin: 0 10px;
            }
        }
    

    相关文章

      网友评论

          本文标题:elementUI中折叠面板箭头图标位置调整

          本文链接:https://www.haomeiwen.com/subject/upuecltx.html