vue3中表格单选

最新推荐文章于 2024-08-07 16:15:28 发布
最新推荐文章于 2024-08-07 16:15:28 发布
阅读量989 收藏 1
点赞数
分类专栏： vue3 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75509848/article/details/133017997
版权
本文介绍了如何在Vue中使用ElementUI的el-table组件实现数据表格，并演示了如何处理多选功能，包括如何调用toggleRowSelection方法来控制单行或多行的勾选状态。
摘要由CSDN通过智能技术生成 
<el-table :data="datas.tableData" ref="tableRef" :max-height="400" class="mt10" border scrollbar-always-on @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" type="index" fixed width="80"></el-table-column>
        <el-table-column label="服务项名称" prop="serviceNo" width="240"></el-table-column>
        <el-table-column label="创建人" prop="signingDate" width="240"></el-table-column>
        <el-table-column label="创建日期" prop="memberUserName" width="240"></el-table-column>
        <el-table-column label="备注" prop="contractNo" min-width="160"></el-table-column>
      </el-table>
// 勾选-单选
const tableRef = ref()
function handleSelectionChange(val) {
  if(val.length>1){
    tableRef.value.toggleRowSelection(val[0],false)
  }
};

说明：需要在表格标签上定义节点ref="tableRef"，使用表格方法toggleRowSelection(val[0],false)；该方法的第一个参数是哪一行（可以是当前行row，也可以是指定的行），第二个参数是布尔值，true就勾选，false就不勾选

℘团子এ
关注
专栏目录
vue循环中点击选中再点击取消(单选)的实现
10-14
主要介绍了vue循环中点击选中再点击取消(单选)的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3 ElementPlus Table表格实现单选
weixin_46641145的博客
07-12 995
/ 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）-- 注意要包一层div根元素，否则css样式可能会不生效 -->// table选择项发生变化时会触发该事件。name: '塞拉'name: '格温'
vue3实现el-table表格单选功能
m0_53118350的博客
07-30 271
要实现效果如下： 具体代码截图如下： 1.el-table组件 方法和select-all方法
vue el-table首列为单选框的设置
最新发布
m0_64393334的博客
08-07 275
vue el-table首列为单选框的设置与操作
vue3实现el-table表格单选功能以及默认选中某一行数据以及多选
weixin_53339757的博客
11-08 9318
vue3实现el-table表格单选功能以及默认选中某一行数据
vue例子（实现单选、多选、弹窗等功能）
07-24
单选、多选、弹窗功能为组件每个页面都可以调用。适合初级初级的vue学习者，共勉。（里面的test文件夹里面的就是组件）
vue3之el-table单选
wch19960518的博客
06-05 575
el-table文档中没有表格数据单选，因此基于复选框实现数据单选限制。
vue3中el-table 复选框设置为单选
weixin_43737647的博客
03-28 865
场景需求：el-table中自带的复选框组件，可以多选，但是目前我们只想要让用户选中一个，变成单选。
vue3+elementplus el-table表格实现单选
weixin_52047574的博客
02-22 3699
要用elementplus里的el-table实现单选，但是el-table的单选是没有方框可以勾选的，只是鼠标点击表格内某一行，那一行背景变色；他的多选是有方框可以勾选的，表头是一个全选框，所以，现在的目标就是改造多选框为单选框，同时去掉表头的全选框。
Vue3 el-table（单选的实现以及解决多个表格切换样式错乱的问题）
Heidi
08-29 1557
解决方式：给每个表格加上唯一key值。
vue实现表格数据的增删改查
08-30
3. 表单处理：在 Vue 中，我们可以使用文本框、单选按钮、select 选择框、多选框等控件来处理表单数据。 4. 数据过滤和排序：我们可以使用两个数组，list 和 slist，来实现数据的过滤和排序。 实践应用 在实际项目...
vxe-table vue table 表格组件功能
01-21
一个功能更加强大的 Vue 表格组件 查看vxe-table 功能点 •基础 •尺寸 •斑马线条纹 •带边框 •单元格样式 •列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •...
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
08-29
在模板部分，我们使用了Vue.js的模板语法，创建了一个表格，表格中包含了多个复选框和文本框。我们使用了v-model指令来绑定复选框的状态。 ``` <td><input type="checkbox" v-model="checkAll">全选({{...
Vue实现购物车的全选、单选、显示商品价格代码实例
10-17
在Vue.js中实现购物车功能，包括全选、单选以及动态显示商品价格，涉及到Vue的数据绑定、事件处理以及计算属性等多个核心概念。以下是对这些知识点的详细解释： 1. **数据绑定** (`v-model`): Vue的核心特性之一，...
Vue3 ElementPlus 实现Table组件表格单选效果
qq_45861961的博客
08-14 2510
Vue3 ElementPlus 实现Table组件表格单选效果
Vue el-table如何实现＜el-table-column type=“selection“＞单选
CjiangN的博客
11-24 3489
el-table-column label="手机号码" prop="telephone" align="center" />highlight-current-row ////选中行高亮。二、在中添加如下方法。
vue3 | table选择组件封装，含单选、多选、跨页选择功能(vue3+element)
ydongabc
04-27 2208
单选时通过样式类 “hidden-checkbox-all” 隐藏checkbox全选框。
Vue中Element的table多选表格如何实现单选
Chen_Z_H_的博客
07-21 1671
【代码】Vue中Element的table多选表格如何实现单选。
vue2和vue3表格左侧单选框代码区别
03-19
Vue2和Vue3在表格左侧单选框的代码实现上有一些区别。下面是它们的主要区别： Vue2中的实现方式： 1. 首先，在data中定义一个变量selectedRow，用于保存选中的行数据。 2. 在表格的模板中，使用v-model指令将选中的行数据与selectedRow进行双向绑定。 3. 在表格的每一行中，使用一个单选框来表示选择状态，并将其绑定到当前行的数据上。 4. 当用户点击单选框时，通过触发一个方法来更新selectedRow的值。 示例代码如下： ```html <template> <table> <tr v-for="item in tableData" :key="item.id"> <td> <input type="radio" v-model="selectedRow" :value="item"> </td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: 'Alice', age: 20 }, { id: 2, name: 'Bob', age: 25 }, { id: 3, name: 'Charlie', age: 30 } ], selectedRow: null }; } }; </script> ``` Vue3中的实现方式： 1. 在Vue3中，可以使用新的Composition API来实现表格左侧单选框。 2. 首先，在setup函数中定义一个ref变量selectedRow，用于保存选中的行数据。 3. 在表格的模板中，使用v-model指令将选中的行数据与selectedRow进行双向绑定。 4. 在表格的每一行中，使用一个单选框来表示选择状态，并将其绑定到当前行的数据上。 5. 当用户点击单选框时，通过触发一个方法来更新selectedRow的值。 示例代码如下： ```html <template> <table> <tr v-for="item in tableData" :key="item.id"> <td> <input type="radio" v-model="selectedRow" :value="item"> </td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </table> </template> <script> import { ref } from 'vue'; export default { setup() { const tableData = [ { id: 1, name: 'Alice', age: 20 }, { id: 2, name: 'Bob', age: 25 }, { id: 3, name: 'Charlie', age: 30 } ]; const selectedRow = ref(null); return { tableData, selectedRow }; } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值