解决 Vue 中的Element-ui 组件el-checkbox动态赋值点击没反应问题
<el-checkbox :value="form.test=== '1'" @change="val => $set(form,'test',val ? '1' : '0')" label="测试" border></el-checkbox>
<el-table @current-change="clickChange"><el-table-column label="选择" width="55"><template slot-scope="scope"><el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio></template></el-table-column></el-table>
EL-TABLE点击当前行选中，只允许选择一个，上一个选中的自动取消
<template>
<div class=" mytable-container">
<div class="table-container">
<el-table :data="testList" style="width: 100%" border
ref="multipleTable"
@selection-change="handleSelectionChange"
@select="selectChange"
@row-click="handleRowClick"
@select-all="selectAll">
<el-table-column width="60px" type="selection" align="center"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
handleSelectionList: []
}
},
methods: {
handleSelectionChange(value) {
this.handleSelectionList = value
},
selectChange(selection, row) {
if (selection.length > 1) {
const del_row = selection.shift()
this.$refs.multipleTable.toggleRowSelection(del_row, false)
}
},
// 点击行触发，选中或不选中复选框
handleRowClick(row, column, event) {
this.$refs.multipleTable.toggleRowSelection(row)
this.selectChange(this.handleSelectionList)
},
selectAll(selection) {
if (selection.length > 1) {
selection.length = 1
}
}
}
}
</script>
项目中遇到的问题记录一下
解决 Vue 中的Element-ui 组件el-checkbox动态赋值点击没反应问题相关推荐
- vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
- Vue引入第三方Element UI 组件
Element UI 官网地址: 各种基于Vue.js的各种UI组件 https://element.eleme.cn/#/zh-CN/component/quickstart https://ele ...
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
- 【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍 轻量级.可靠的移动端 Vue 组件库 有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性 拥 ...
- Element UI 组件库分析和二次开发（一）
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...
- 基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册 前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
- class根据状态 vue_搞懂并学会运用 Vue 中的无状态组件
啥是应用程序状态,为什么咱们需要它? 状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了.简单的说,状态是一个包含应用程序使用的最新值的对象.但是,如果咱们从结构 ...
- Element ui 组件中用键盘事件
//这是表单 <el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm&q ...
最新文章
- 从JavaScript数组中获取随机项[重复]
- 热更新--动态加载framework
- 一个http-request的源码及改进
- .NET中的文件IO操作实例
- 经过阿里，百度一面，二面后，我总结了150道iOS面试题
- java 模板方法设计模式_Java中的模板方法设计模式
- C#在线打开编辑保存Excel文件[pageoffice]
- 【数据分享】错颌畸形生长患者治疗数据集
- [Material Design] MaterialButton 效果进阶 动画自动移动进行对齐效果
- linux远程配置ssh服务,Linux远程服务之OpenSSH配置
- JAVA基础(4/17)-基本语法_流程控制
- Session存放token/获取token,销毁session
- VS Code：4个中文乱码问题及解决方法
- stm32单片机按键消抖、长按、多击终极解决方案
- 计算机网络面经八股文
- 苹果留给 iOS 开发者的时间不多了：30 天内必须更新旧版本！
- 使用Glide加载圆角矩形图片、圆形图片
- 最优化之凸集、凸函数、上确界、Jensen不等式、共轭函数、Fenchel不等式、拉格朗日乘子法、KKT条件
- 【Linux操作系统】——Linux命令
- 你身边的博士刚毕业以及稳定下来后的年薪大约是 多少？