Source/plt-web/plt-web-ui/src/components/PLT-basic-component/transfer.vue

@@ -8,7 +8,7 @@
      append-to-body="true"
      class="avue-dialog"
      style="text-align: center"
      width="40%"
    width="50%"
      @close="dialogClose">
      <el-transfer
        v-model="rightRoleData"
@@ -16,27 +16,27 @@
        :data="data"
        :filter-method="filterMethod"
        :render-content="renderFunc"
        :titles="['现有角色', '拥有角色']"
        filter-placeholder="角色名称搜索"
      :titles="transferTitle"
      filter-placeholder="关键词搜索"
        filterable
        style="text-align: left; display: inline-block;">
      </el-transfer>
      <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="sendHandler">确 定</el-button>
  </span>
    <div slot="footer" class="dialog-footer">
      <div class="valueInfo" v-if="bottomValue">已设置的值为：[{{bottomValue}}]</div>
      <el-button @click="visible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="sendHandler" size="small">确 定</el-button>
    </div>
    </el-dialog>
</template>

<script>
export default {
  name: "transfer",
  props: ['title', 'leftRoleData', 'rightRoleData'],
  props: ['title', 'leftRoleData', 'rightRoleData', 'transferTitle' , 'bottomValue'],
  data() {
    return {
      visible: false, // 通过 this.$refs.transfer.visible = true; 开启子组件对话框
      data: [],
      value: [],
      loading: false,
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
@@ -49,11 +49,11 @@
  watch: {
    //渲染穿梭框
    leftRoleData: {
      handler(newval, oldval) {
      handler(newval) {
        if (newval) {
          // 清空data数组
          this.data = [];
          newval.forEach((city, index) => {
          newval.forEach((city) => {
            this.data.push({
              label: city.name,
              key: city.oid,
@@ -82,11 +82,20 @@
</script>

<style lang="scss" scoped>
/deep/ .el-transfer-panel{ /* 左右两个穿梭框的高度和宽度 */
  height: 450px;
/deep/ .el-transfer-panel {
  height: 450px; /* 左右两个穿梭框的高度和宽度 */
  width: 300px;
}

/deep/ .el-transfer-panel__list.is-filterable {
  height: 323px; /* 穿梭框列表高度 */
}

.valueInfo{
  float: left;
  border: 1px solid #E9E7E7;
  display: inline-block;
  vertical-align: middle;
  padding: 6px 12px;
  line-height: 1;
}
</style>