field-tag AMS标签

预览图

使用

在AMS的resourc配置使用：

// 输入创建标签
testTag: {
    type: 'tag',
    label: '标签',
    props: {
        'allow-create': true
    }
}

// 选择标签（接口数据）
testTag: {
    type: 'tag',
    label: '标签',
    props: {
        placeholder: '请输入标签',
        action: 'https://www.easy-mock.com/mock/5a0023effbbb09615044cb82/tag',
        successCode: 200
    }
}

// 选择标签（静态数据）
testTag: {
    type: 'tag',
    label: '标签',
    props: {
        placeholder: '请选择标签',
        options: [
            {
                'id': 2001,
                'name': '电商',
            },
            {
                'id': 2002,
                'name': '游戏',
            },
            {
                'id': 2003,
                'name': '效率',
            },
            {
                'id': 2004,
                'name': '资讯',
            },
            {
                'id': 2005,
                'name': '社区',
            }
        ]
    }
}

// 创建或选择标签（静态数据，也支持接口数据）
testTag: {
    type: 'tag',
    label: '标签',
    props: {
        'allow-create': true,
        options: ['唯品会', '天猫', '淘宝', '京东', '拼多多']
    }
}

接口数据结构：

// 输入创建标签
{
    "code": 200,
    "data": {
        "list":["aaaa.bbb.name", "aaaa.ccc.name"]
    },
    "msg": "success"
}

// 从接口选择已有标签添加模式
{
    "code": 200,
    "data": {
        "list":[
            {
                "id": 2001,
                "name": "aaaa.bbb.name",
                "subName": "分类一" //【可选】显示在下拉选择的次标题，如果没有subName，下拉次标题显示id
            }
            ...
        ]
    },
    "msg": "success"
}

其中上面每个标签包含id、name和subName三个字段，建议接口统一输出同名的字段。如果有旧接口无法兼容，可以通过props.idKey、props.nameKey和props.subNameKey来配置和接口对应的字段名。

传值

Array

// 自由输入添加标签模式
["aaaa.bbb.name", "aaaa.ccc.name"]

// 选择标签
[
    {
        "id":2001,
        "name":"aaaa.bbb.name",
        "subName": "分类一" // //【可选】显示在下拉选择的次标题，如果没有subName，下拉次标题显示id
    },
    ...
]

深入：get、set与view配置

如果业务的数据结构千奇百怪，上面配置无法实现，可以通过更自由的get、set 与 view 来配置

testTag: {
    type: 'tag',
    label: '选择标签',
    props: {
        placeholder: '请输入标签',
        action: 'https://www.easy-mock.com/mock/5a0023effbbb09615044cb82/tag',
        successCode: 200
    },
    get(value) { // 编辑状态下有效（ctx 为 edit）
        console.log(value)
        return value.map(item => {
            return (item.name || item) + '-get';
        });
    },
    set(value) { // 编辑状态下有效（ctx 为 edit）
        console.log(value)
        return value.map(item => {
            return (item.name || item) + '-set';
        });
    },
    view(value) { // 显示状态下有效（ctx 为 view）
        console.log(value)
        return value.map(item => {
            return item.name + '-view';
        });
    }
},

配置

| 参数 | 类型 | 必填 | 说明 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | type | string | 是 | 文本类型 | 固定值为tag | | label | string | 否 | 标签文本 | - | | hidden | boolean | 否 | 是否隐藏field | false| | rules | array | 否 | 校验规则，详见async-validator | - | | collapseLimit | number | 否 | 展示状态下，最多显示的标签个数，超出隐藏 | - | | on | object | - | 事件绑定 | - | | on.click | function | 否 | 点击 Tag 时触发的事件 | - | | on.close | function | 否 | 关闭 Tag 时触发的事件 | - | | props | object | - | 补充属性 | - | | props.action | string | 否 | 标签数据接口地址（优先级高于options） | - | | props.options | array | 否 | 标签静态数据接口地址 | - | | props.method | string | 否 | 接口请求方法， | GET | | props.successCode | number | 否 | 接口请求成功code | 和resource的全局配置里的api successCode 一致 | | props.withCredentials | boolean | 否 | 接口请求是否携带cookie | 和resource的全局配置里的api withCredentials 一致 | | props.placeholder | string | 否 | 输入框的placeholder配置 | 请输入... | | props.button | string 或者 boolean | 否 | 如果是string类型，代表添加按钮的文案配置；如果是boolean类型，值为false代表隐藏该按钮 | + 添加 | | props.size | string | 否 | 尺寸，可取值：medium / small / mini | - | | props.closable | boolean | 否 | 编辑状态下，标签是否可关闭 | false | | props.template | string | 否 | 标签显示的内容模板，语法和vue的模板语法类似，比如 {{ name }} - {{ subName }} - {{ id }} （其中name、subName和id是数据结构里的字段）| 默认只展示name字段 | | props['multiple-limit'] | number | 否 | 用户最多可以选择的项目数，为 0 则不限制 | 0 | | props['allow-create'] | boolean | 否 | 输入文字来创建新的标签（注意：允许输入创建，数据结构统一使用元素为字符串的数组格式 ["aaaa.bbb.name", "aaaa.ccc.name"]） | false | | props.idKey | string | 否 | 表示id这个字段key | id | | props.nameKey | string | 否 | 表示name这个字段key | name | | props.subNameKey | string | 否 | 表示subName这个字段key | subName |

更多的props配置请查看：

• element-input
• element-tag