Vue+ElementUI 在弹出框modal中写树形控件的布局class

我在弹出框中写了个树形结构:
Vue+ElementUI 在弹出框modal中写树形控件的布局class_第1张图片
但是想要让可点按钮“设置积分返点”居右,我的代码片片:

<Modal v-model="modal1" title="设置积分返点"  style="text-align:center">
  <el-select v-model="oneClassSel" placeholder="请选择" size="mini" style="text-align:left">
    <el-option :label="'全部'" :value="0"></el-option>
    <el-option v-for="item in allClassTree" :key="item.id" :label="item.name" :value="item.id"> </el-option>
  </el-select>
  <div class="content-div"  style="margin-top:1rem">
    <el-row>
      <el-col :span="20">
        <el-tree :data="selClassTree" show-checkbox node-key="id" :expand-on-click-node="false" :props="treeProps" accordion>
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span>
              <span class="node-title">{{ node.label }}</span>
            </span>
            <span>
              <el-button type="text"  @click="jffdSet(node, data)" size="mini">设置积分返点</el-button>
            </span>
          </div>
        </el-tree>
      </el-col>
    </el-row>
  </div>
</Modal>

我的style:

.custom-tree-node {
  flex: 1;
  display: flex;  //浮动布局
  align-items: center;  //居中
  justify-content: space-between;  //左右对齐
  font-size: 14px;
  padding-right: 8px;
  padding-top: 5px;
}
.add-next-null-btn {
  opacity: 0;
}
.ivu-form-item{
  margin-bottom: 0px;
}

然后就好了哎:
Vue+ElementUI 在弹出框modal中写树形控件的布局class_第2张图片

你可能感兴趣的:(vue.js)