HOS基础开发平台

# transfer-list 穿梭列表

# 基本用法

此组件是基于biz-table组件的二次封装。支持所有biz-table的属性和事件。关于biz-table的具体使用方法请参考biz-table 。
注意事项:

  1. 此组件已进行全局注册,使用时无需重复引入。使用时组件标签名 <hos-biz-transfer-list> 或 <HosBizTransferList>。
  2. 组件支持 单选 与 多选 (默认为 多选 ),格式始终为 Array。
  3. value-key 默认值为: id , label-key默认值为: name。
  4. 此组件必传属性: cols data uid ,使用方法同biz-table。特别地,biz-table的 cols 属性中,无需再添加selection列,transfer-list组件已对selection列进行自动添加。
  5. 如需在左侧 table 中使用查询功能,必须传入 form 属性及名称为form的具名插槽。如需进行回显,必须传入 showData 属性,类型为 array 。
  6. 从后端获取到数据,进行回显时,需要对获取的数据进行格式化,将数据的 key 和 value 字段转为value-key 和 label-key指定的字段。

示例用法如下:

<template>
  <hos-biz-transfer-list
    title="测试标题"
    labelKey="name"
    valueKey="id"
    :showData="showData"
    :uid="tableUid"
    :cols="cols"
    :data="selectPage"
    :form="form"
    v-model="transferValue"
  >
    <template #form>
      <hos-row :gutter="20">
        <hos-col :span="8">
          <hos-form-item :label="$t('编码')">
            <hos-input
              v-model="form.model.code"
              clearable
              :placeholder="$t('请输入编码')"
            ></hos-input>
          </hos-form-item>
        </hos-col>
        <hos-col :span="8">
          <hos-form-item :label="$t('名称')">
            <hos-input
              v-model="form.model.name"
              clearable
              :placeholder="$t('请输入名称')"
            ></hos-input>
          </hos-form-item>
        </hos-col>
        <hos-col :span="8">
          <hos-form-item>
            <hos-biz-button run="form.search" type="primary"
              >{{ $t('查询') }}</hos-biz-button
            >
            <hos-biz-button @click="reset()">{{ $t('重置') }}</hos-biz-button>
          </hos-form-item>
        </hos-col>
      </hos-row>
    </template>
  </hos-biz-transfer-list>
</template>

<script>
  export default {
    data() {
      return {
        showData: [],
        tableUid: "transferListTable",
        transferValue: [],
        form: {
          labelWidth: "auto",
          model: {
            code: "",
            name: "",
          },
        },
        cols: [
          {
            prop: "code",
            label: this.$t("编码"),
          },
          {
            prop: "name",
            label: this.$t("名称"),
          },
        ],
      };
    },
    created() {
      this.init();
    },
    methods: {
      async init() {
        const roleId = "xxxxxx";
        const apiPath = "base.xxx.xxx";
        const { data, code, msg } = await this.$api(apiPath, roleId);
        if (code == "200") {
          this.transferValue = data.map((item) => item.dataId);
          this.showData = data.map((item) => {
            const obj = {
              id: item.dataId,
              name: item.dataName,
            };
            return obj;
          });
        } else {
          this.$message(msg);
        }
      },
      selectPage(params) {
        const apiPath = "base.xxx.xxx";
        return this.$api(apiPath, params);
      },
      reset() {
        console.log("reset");
      },
    },
  };
</script>

# 属性

属性 描述 类型 可选值 默认值
value/v-model transfer-list 组件的值 array — [ ]
title 右侧勾选结果列表的标题 string — '已选数据'
multiple 是否多选 boolean — true
displayConfirm 是否显示"确认"和"取消"按钮 boolean — false
labelKey 指定 label 的字段名 string — 'name'
valueKey 指定 value 的字段名 string — 'id'
showData 用于回显左侧表格的选择情况及右侧列表的数据 array — [ ]

# 事件

事件名 描述 回调参数
change value/v-model 的值改变后触发的事件 (value: array)
confirm 点击"确定"按钮时触发的事件(displayConfirm:true) (value: array)
cancel 点击"取消"按钮时触发的事件(displayConfirm:true) —

← biz-dialog 弹窗 →