vue element UI el-table 给表格添加复选框,并得到所选值

 <el-table @selection-change="changeCheckBoxValue"  v-bind:data="this.requireData" v-loading="this.tableLoading"
                              border
                              style="width:100%" >
 <el-table-column min-width=‘140‘ type="selection"></el-table-column>
 <el-table-column prop="RequirementNO" v-bind:label="$t(‘rq_lst_require_no‘)" min-width=‘150‘>  </el-table-column>
 </el-table>
<script>

    methods: {
changeCheckBoxValue(val) {
$.each(val, function (i, v) {
console.log(i, v.RequirementNO);//function里面可以接受两个参数,i是索引,v是每次循环的具体元素。
})

},

    }
</script>

指定  type="selection" 就可以了

@selection-change="changeCheckBoxValue" 此事件可监听选中的所有值

原文地址:https://www.cnblogs.com/foreverfendou/p/12665039.html

时间: 2024-10-12 02:31:55

vue element UI el-table 给表格添加复选框,并得到所选值的相关文章

VUE+Element UI实现简单的表格行内编辑效果

原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <!-- 引入样式 --> 7 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/

vue + element ui 阻止表单输入框回车刷新页面

问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止表单回车提交. 测试 下面的代码出现表单回车提交 <body> <div id="app"> <el-form ref="form" :model="form" label-width="80px"&

vue + element ui table表格二次封装 常用功能

因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data="tableData" size="medium" ref="multipleTable" border fit @sort-change="handleSort" @filter-change="filterHandler&

vue+element UI实现分页组件

1.前言 在web页面中,常常需要将后台查询到的数据以表格形式展示出来,而这些数据量往往会非常庞大,如果将所有要展示的数据一次性请求获取并展示到页面上,那页面长度势必会变得非常的长,很不美观.更重要的是,如果数据量过于大,在页面加载时一次性请求全部数据将会耗费大量网络资源,性能极低.但是,如果我们可以将数据分页展示,这样页面首先不会变的冗长,另外只有用户点击页码才会发出请求并且每次请求的数据量也不会很大,这就极大的节省了网络资源,提高了性能.本文就以vue结合element UI实现一个数据分页

vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、一级mockjs用法、路由懒加载三种方式

不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI简单Cascader级联选择器使用</p> <el-cascader :options='options' v-model="selectedOptions" @change="handleChange"> </el-

vue+element UI实现多级导航菜单

1.前言 在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可能是多级的,所以我们需要使用递归的方式,一层一层的递归数据,将多级菜单完整显示出来.本篇博文借助element UI组件库中的Navmenu导航菜单组件,将其进行改造后封装成一个多级导航菜单组件. 2.工作流程 组件封装好之后,由父组件调用该组件,父组件先向后端发送请求获取菜单数据,然后将菜单数据传

dojo:为数据表格添加复选框

一.添加复选框 此时应该选用EnhancedGrid,而不是普通的DataGrid.添加复选框需要设置EnhancedGrid的plugins属性,如下: gridLayout =[{ defaultCell: { type: cells._Widget, styles: 'text-align: center;' }, cells: [ { name: "WBS", field: "wbsCode", width: "60px"}, { nam

dev 表格添加复选框 ,可以勾选多行

this.repositoryItemCheckEdit1.QueryCheckStateByValue += new DevExpress.XtraEditors.Controls.QueryCheckStateByValueEventHandler(re3_QueryCheckStateByValue); //判断表格的数据勾选复选框 void re3_QueryCheckStateByValue(object sender, DevExpress.XtraEditors.Controls.

vue+element ui table组件封装,使用render渲染

后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-table-column></el-table-column>, 维护起来相当麻烦,就想到了使用render渲染. 组件内部封装代码: <template> <el-table :data="tableData" size="medium"