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

最新推荐文章于 2023-08-05 14:21:39 发布

csf109csf

最新推荐文章于 2023-08-05 14:21:39 发布

阅读量2.3k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/csf109csf/article/details/103869638

版权

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

摘要由CSDN通过智能技术生成

直接上代码:

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

csf109csf

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

weixin_42066070的博客

12-30

1643

<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

944

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

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

IView table单选实现

AIfurture的博客

07-23

729

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

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

Lear的博客

07-05

1405

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

vue-element 多选框实现单选

soul_rules的博客

12-17

2969

多选框实现单选，取消全选，取消选中 <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

2104

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

vue-多选框设置为单选框

junjiahuang的博客

04-08

2708

不要使用@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

5735

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

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

wytraining

03-29

4598

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

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

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

07-18

3513

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

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

m0_55892953的博客

11-10

348

<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

2625

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

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

干脆来碗面的博客

09-11

2742

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

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

飞翔༒之翼

09-19

2561

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

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

热门推荐

H5女王范儿

01-18

1万+

单选/多选获取选中行单选通过设置属性 highlight-row，可以选中某一行。当选择时，触发事件 @on-current-change，可以自定义操作，事件返回两个值 currentRow 和 oldCurrentRow，分别为当前行的数据和上一次选择的数据。通过给 columns 数据设置一项，指定 type: ‘index’，可以自动显示一个从 1 开始的索引列。使用 index...

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

每日秃头

04-28

3095

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

vue table 实现单选逻辑

Aimee3333的博客

09-03

1209

table表格有时需要在每行前面添加一列实现可勾选对应行的状态，table默认是多选的逻辑，如果需要实现单选，需要结合table封装好的一些方法和事件 html部分： <el-table ref="multipleTable" :data="tableData" highlight-current-row @select-all="onSelectAll" @selecti

Vue 实现checkbox的单选以及全选

GhostUncledrew-blogs

03-11

1588

Vue 实现checkbox的单选以及全选 <template> <div> <span>全选</span> <input type="checkbox" v-model="checkAll" /> <div v-for="(item,index) in test" :key="index"> ...

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

chenyajundd的博客

08-05

4532

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

Vue v-model实现自定义多选单选：问题与解决方案

"vue v-model实现自定义样式多选与单选功能" 在Vue.js中，`v-model`是一个非常强大的指令，它用于双向数据绑定，使得表单元素（如单选按钮、复选框）与Vue实例的数据模型之间建立联系。在本案例中，开发者遇到了在...

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

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