美文网首页程序员
elementUI穿梭框多条内容展示

elementUI穿梭框多条内容展示

作者: 橙小光 | 来源:发表于2019-04-11 15:26 被阅读0次
image.png
<el-transfer
      v-model="tranValue"
      :data="tranData"
    >
      <template slot-scope="scope">
        <span>
          <span>{{scope.option.label}}</span>
          <span class="small">教工号:{{scope.option.key}}</span>
        </span>
      </template>
    </el-transfer>


tranData: [
        { key: 1001, label: "教师1" },
        { key: 1002, label: "教师2" },
        { key: 1003, label: "教师3" }
      ],
      tranValue: []

sass穿梭框样式覆盖:

.el-transfer-panel {
  width: 230px;
  .el-checkbox__label {
    .small {
      font-size: 10px;
      float: right;
      color: rgb(172, 165, 165);
    }
  }
}

相关文章

网友评论

    本文标题:elementUI穿梭框多条内容展示

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