vue iview组件将table的selection多选变单选方法

最新推荐文章于 2024-12-04 11:20:40 发布

原创

最新推荐文章于 2024-12-04 11:20:40 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了如何在Vue.js结合iView组件的Table中，将原有的多选功能修改为单选操作。通过修改代码实现单选功能，详细步骤如下所示。

直接上代码:

{
   
   
    title: '选择框',
    align:'center',
    key: 'checkBox',
    render:(h,params)=>{
   
   
        return h(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

csf109csf

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue table多选框改为单选功能实现

weixin_42066070的博客

12-30

1854

<el-table ref="tb" v-loading="loading" :data="infoList" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" align="center" /> <el-table-column label=.

iview Table实现跨页勾选记忆功能以及利用ES6的Map数据结构实现根据id进行对象数组的去重

qq_37635012的博客

12-05

1136

我们在data里定义了一个数组selectArr，用于存储我们当前所有页面已经选中打钩的数据。getTableData_new获取当前页table数据，需注意的是在我们调获取当前页table数据的接口成功后，我们需要先将当前页所有数据的_checked设为false,即默认未勾选中，然后遍历我们已经勾选中的selectArr，如果找到了就设为勾选中。这也就是实现了“记忆”功能。现在有个需求就是，在我们选择不同页码的数据勾选中之后，实现跨页勾选记忆功能，就是说已经打钩了的数据，不管切到哪一页它都是打钩状态。

参与评论您还未登录，请先登录后发表或查看评论

vue + element ui table表格多选改单选

每日秃头

04-28

3217

<el-table ref="multipleTable" :data="LogisticstableData" :header-cell-style="{background:'#eef1f6',color:'#909399'}" border style="width: 100%" fixed @select="select...

Vue 实现全选、多选、单选效果

chenyajundd的博客

08-05

5072

假如这里有多个卡片，点击相应卡片之后需要提交卡片内信息，我们需要把点击的卡片筛选出来，在不使用组件库的前提下实现全选，多选，单选操作（其中全选和多选为一个需求，单选为一个需求）

iview 将table的selection多选变单选方法

Lear的博客

07-05

1598

{ title:'#', type:'checkBox', align: 'center', width:80, render:(h,params)=>{ return h('div',[ h('Checkbox',{ props:{ value:params.row.checkBox }, .

iview table表格的多选框修改为单选

干脆来碗面的博客

09-11

2829

最近在做后台管理项目, 其中项目中需要用到表格单选, 前端ui组件使用的iview, 其中iview自带的单选, 其选择状态不友好, 不适宜项目中使用, 就自己修改了一下请注意----------------------------- 其中 vm.columnsData 是你自己的表格绑定的数组,根据自己命名的值进行变化 { title: '请选择', a...

vue2.0 iview2.0+ Table 表格自定义封装动态配置columns 按照顺序展示

愿你走过半生，归来任是少年。

07-18

3703

common-content为最外层的盒子，paging组件一看就是管理分页的组件，把封装好的table-list当作slot插槽看一下table-list的配置项： isCheckbox 是否显示Checkbox height 表格的高度 columnObject 每一列的数据对象 checkArray 表头的数组 fixedOrder 用来固定顺序的表头数组 <div class="common-content"> <paging ref="paging.

vue中使用iview的table表格实现导出全部和导出选中

zcfzfc123456789的博客

08-14

4364

布局 <div> <Checkbox v-model="showCheckbox" @on-change="clearSelect(false)"></Checkbox> <div class='batchoperation'>批量操作</div> <div class="expo...

IView table单选实现

AIfurture的博客

07-23

799

步骤一：<Table ref=“modalTable”:columns=“modalColumns” :data=“testData” border stripe> 步骤二： data() { return { currentChoose: ‘0’, modalColumns: [ { title: ‘选择’, key: ‘id’, width: 70, align: ‘center...

vue elmentUI table表格使用多选框改为单选，表头多选框改成文字

最新发布

weixin_43737733的博客

12-04

819

用于为特定的标签添加自定义样式（定义一个类名，设置样式）2、设置样式去掉表头全选框，改为“选择”文字。1、在表格内使用selection选框。3、设置选择事件，将多选设置为单选。定义选框选择选中事件。

vue-element 多选框实现单选

soul_rules的博客

12-17

3037

多选框实现单选，取消全选，取消选中 <el-table ref="tables" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border size="mini" :header-cell-style="{'text-align':'center'}" :height="tableHei...

vue中使用select元素实现单选radio的功能

洛神赋

06-18

2151

<html><head> <script src='js/vue.js'></script></head><body> <div id="example"> <select v-model='city'> <option value='西安'&am

vue-多选框设置为单选框

junjiahuang的博客

04-08

2796

不要使用@selection-change,会有渲染问题。 table是封装过的。 <t-table @select-all="selectAll" @select="selection" > </t-table> selectAll() { // 当做清空来用，单选就没有全选功能 let elTb = this.$refs.table.$refs.elTable // table对象，根据实际来 eltb.clearSelection() this..

获取iview中表单组件Table的选中数据

yu102655的专栏

01-03

5938

背景：在做某系统的审批中心时，新增了审批消息一键已读和删除功能，用iview的表单组件-Table实现消息列表展示，效果如下图所示：在实现一键已读或一键删除时需要获取当前消息列表中所有选中项，通过与服务端API交互来改变消息状态或删除消息。iview官方文档仅提供单选、全选或者选中项发生变化时的监听，并没有提供获取选中项的方法。通过查看官方demo和源码，发现可以通过this.$refs.table组件ref值.getSelection()的方式获取table选中项，下面在官方demo的基础上修改下

element table 复选框样式不变改为单选

m0_55892953的博客

11-10

398

<el-table :data="tableData" ref="selectTable" @row-click="rowClick" @selection-change="handleSelection" > </el-table> rowClick(val) { this.$refs.selectTable.toggleRowSelection(val) } handleSelection(val) { if(val.le.

Vue 实现el-table多选样式变为单选效果

qq_41580802的博客

10-15

2745

我最近在我的项目开发中遇到一个需要将el-table复选框变单选的需求，同时单选某一行会异步调用接口，请求后台数据；我解决问题之后，觉得还是把这些改进写清楚，方便 Vue的初学者。

iview实现表格的全选、反选、清空、统计、单选等功能

wytraining

03-29

4866

iview实现表格的全选、反选、清空、统计、单选等功能

vue+element中table框在最前面加复选框变单选的问题

飞翔༒之翼

09-19

2683

1.先看一下效果：就是这样的一种效果，下面就是关键代码： ref="multipleTable" @select="handleSelect" @selection-change="handleSelectionChange" 关键代码就是这个，在table里写上就可以了 .tablessp thead tr .el-checkbox__input{ display: none; }...

iview table 单选/多选获取选中行

vue iview组件 将table的selection多选变单选方法

vue iview组件将table的selection多选变单选方法