CommonRadio.vue

 <template>
<div>
<el-checkbox-group v-model="checkList" @change="handleChange">
<el-checkbox :label="item[keyId]" v-for="item in list" :key="item">{{item[label]}}</el-checkbox>
</el-checkbox-group>
</div>
</template> <script>
export default {
props: {
value: [String, Array],
list: {
type: Array,
default () {
return [];
}
},
keyId: {
type: String,
default: 'value',
},
label: {
type: String,
default: 'label'
},
},
data() {
return {
checkList: [],
}
},
watch: {
value: {
immediate: true,
handler(val) {
this.checkList = [ val ];
}
}
}, methods: {
handleChange(arr) {
this.checkList.length > 1 && this.checkList.shift(); this.$nextTick(() => {
let val = this.checkList.length > 0 ? this.checkList[0] : '';
this.$emit('change', val);
this.$emit('input', val);
})
}
},
}
</script> 调用 <div class="associated-list">
<template v-for="(item, index) in associatedList">
<el-form-item :label="item.name" :key="item" v-if=" (maxSize !== null ? index < maxSize : true)">
<CommonRadio v-model="associated[`tags_${item.id}`]" :list="item.tags" :keyId="`id`" :label="`name`"></CommonRadio>
</el-form-item>
</template> <div class="get-more">
<el-button type="text" @click="showMore" v-if="maxSize !== null && associatedList.length > 3">更多行为标签&gt;&gt;</el-button>
</div>
</div>

vue + elementui 使用多选按钮实现单选功能的更多相关文章

  1. vue Element-ui 表格多选 修改选中行背景色

    实现的效果: 整体思路方式: 1.给获取到的数据添加自定义的className 2.在点击行(row-click)和手动点击勾选框的事件(select-all)中获取到当前的row的className ...

  2. checkbox多选按钮变成单选

    <input id="a" type="checkbox"/><input id="b" type="check ...

  3. elementui禁用全选按钮

     document.getElementsByClassName('el-checkbox__input')[0].classList.add('is-disabled')           doc ...

  4. layui 数据表格复选框实现单选功能

    //点击选中(单选)//单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-tab ...

  5. vue+element-ui 项目中实现复制文字链接功能

    需求: 点击复制按钮,复制一个链接 在GitHub上找到一个clipboard组件,功能比较齐全 使用方法:   安装 npm i clipboard --save HTML <template ...

  6. DataGridView复选框实现单选功能(二)

    双击DataGridView进入事件 private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventA ...

  7. vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择

    一.vue+elementUI实现 分页表格前的多选 多选效果图: 代码如下: <el-table ref="multipleTable" :data="listD ...

  8. iView的tree组件实现单选功能

    iView中的树组件有复选框可以多选,但是目前还没有提供单选框的模式,不显示复选框可以提供高亮单选的模式,但是再次点击就被取消了,没有实现真正的单选: tree 的属性配置中 multiple 是否支 ...

  9. vue+element-ui实现表格checkbox单选

    公司平台利用vue+elementui搭建前端页面,因为本人第一次使用vue也遇到了不少坑,因为我要实现的效果如下图所示 实现这种单选框,只能选择一个,但element-ui展示的是多选框,check ...

随机推荐

  1. 微信小程序上架需要增值电信业务经营许可证ICP?

    很多小程序的开发者最近都遇到了类似的问题,那就是辛辛苦苦开发出来的小程序上线不了,要求提供一些特殊资质,比方说:增值电信业务许可证(下面有数十种分类),网络文化经营许可证等类似证件,这对于创业团队来说 ...

  2. remaining connection slots are reserved for non-replication superuser connections

    使用客户端工具连接pg,连接失败,报错以下错误: FATAL: remaining connection slots are reserved for non-replication superuse ...

  3. vue-vuex的使用

    做后台项目的时候,有时候会需要用到状态管理,VUEX就能够很好的为我们解决好这个问题. 安装 VUEX npm install vuex --save 具体使用: 建立 src/store/index ...

  4. Java JDBC利用反射技术将查询结果封装为对象

    1.JDBC将返回结果集封装成对象demo class JdbcDemo { /** * 获取数据库列名 * @param rs * @return */ private static String[ ...

  5. c#中Split 分离字符以及空格消除方法

    1        split几种分离方法 1)用字符串分隔: using System.Text.RegularExpressions; string str="aaajsbbbjsccc& ...

  6. Activiti数据库表结构(23张表5.*版本)

    1  Activiti数据库表结构 1.1      数据库表名说明 Activiti工作流总共包含23张数据表,所有的表名默认以“ACT_”开头. 并且表名的第二部分用两个字母表明表的用例,而这个用 ...

  7. 算法练习之二叉树的最大深度,二叉树的层次遍历 II

    1.二叉树的最大深度 给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. 说明: 叶子节点是指没有子节点的节点. 示例:给定二叉树 [3,9,20,null,n ...

  8. 删除Win10自动下载的更新安装包

    当我们禁止了系统的自动更新后,会感觉还有什么东西没做,没错,你还没有删除系统自动下载好的安装包,如果不删除的话会白白浪费磁盘空间!那么系统自动下载的安装包在哪里呢? C盘Windows—Softwar ...

  9. RDB和AOF持久化

    RDB和AOF持久化 https://www.cnblogs.com/Tu9oh0st/p/11229317.html Redis提供了不同的持久化选项: RDB持久化以指定的时间间隔保存那个时间点的 ...

  10. java开发异常Exception集锦

    背景:整理开发过程中的异常问题 java.lang.Exception: No tests found matching 一般出现在新导入的工程中.在sts中通过open project的方式导入工程 ...