vue + elementui 使用多选按钮实现单选功能
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">更多行为标签>></el-button>
</div>
</div>
vue + elementui 使用多选按钮实现单选功能的更多相关文章
- vue Element-ui 表格多选 修改选中行背景色
实现的效果: 整体思路方式: 1.给获取到的数据添加自定义的className 2.在点击行(row-click)和手动点击勾选框的事件(select-all)中获取到当前的row的className ...
- checkbox多选按钮变成单选
<input id="a" type="checkbox"/><input id="b" type="check ...
- elementui禁用全选按钮
document.getElementsByClassName('el-checkbox__input')[0].classList.add('is-disabled') doc ...
- layui 数据表格复选框实现单选功能
//点击选中(单选)//单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-tab ...
- vue+element-ui 项目中实现复制文字链接功能
需求: 点击复制按钮,复制一个链接 在GitHub上找到一个clipboard组件,功能比较齐全 使用方法: 安装 npm i clipboard --save HTML <template ...
- DataGridView复选框实现单选功能(二)
双击DataGridView进入事件 private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventA ...
- vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择
一.vue+elementUI实现 分页表格前的多选 多选效果图: 代码如下: <el-table ref="multipleTable" :data="listD ...
- iView的tree组件实现单选功能
iView中的树组件有复选框可以多选,但是目前还没有提供单选框的模式,不显示复选框可以提供高亮单选的模式,但是再次点击就被取消了,没有实现真正的单选: tree 的属性配置中 multiple 是否支 ...
- vue+element-ui实现表格checkbox单选
公司平台利用vue+elementui搭建前端页面,因为本人第一次使用vue也遇到了不少坑,因为我要实现的效果如下图所示 实现这种单选框,只能选择一个,但element-ui展示的是多选框,check ...
随机推荐
- 微信小程序上架需要增值电信业务经营许可证ICP?
很多小程序的开发者最近都遇到了类似的问题,那就是辛辛苦苦开发出来的小程序上线不了,要求提供一些特殊资质,比方说:增值电信业务许可证(下面有数十种分类),网络文化经营许可证等类似证件,这对于创业团队来说 ...
- remaining connection slots are reserved for non-replication superuser connections
使用客户端工具连接pg,连接失败,报错以下错误: FATAL: remaining connection slots are reserved for non-replication superuse ...
- vue-vuex的使用
做后台项目的时候,有时候会需要用到状态管理,VUEX就能够很好的为我们解决好这个问题. 安装 VUEX npm install vuex --save 具体使用: 建立 src/store/index ...
- Java JDBC利用反射技术将查询结果封装为对象
1.JDBC将返回结果集封装成对象demo class JdbcDemo { /** * 获取数据库列名 * @param rs * @return */ private static String[ ...
- c#中Split 分离字符以及空格消除方法
1 split几种分离方法 1)用字符串分隔: using System.Text.RegularExpressions; string str="aaajsbbbjsccc& ...
- Activiti数据库表结构(23张表5.*版本)
1 Activiti数据库表结构 1.1 数据库表名说明 Activiti工作流总共包含23张数据表,所有的表名默认以“ACT_”开头. 并且表名的第二部分用两个字母表明表的用例,而这个用 ...
- 算法练习之二叉树的最大深度,二叉树的层次遍历 II
1.二叉树的最大深度 给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. 说明: 叶子节点是指没有子节点的节点. 示例:给定二叉树 [3,9,20,null,n ...
- 删除Win10自动下载的更新安装包
当我们禁止了系统的自动更新后,会感觉还有什么东西没做,没错,你还没有删除系统自动下载好的安装包,如果不删除的话会白白浪费磁盘空间!那么系统自动下载的安装包在哪里呢? C盘Windows—Softwar ...
- RDB和AOF持久化
RDB和AOF持久化 https://www.cnblogs.com/Tu9oh0st/p/11229317.html Redis提供了不同的持久化选项: RDB持久化以指定的时间间隔保存那个时间点的 ...
- java开发异常Exception集锦
背景:整理开发过程中的异常问题 java.lang.Exception: No tests found matching 一般出现在新导入的工程中.在sts中通过open project的方式导入工程 ...