码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • el-table-column默认选中一个复选框和只能单选事件


    表格代码

    1. <el-table ref="contractTable" v-loading="loading" :data="contractList" @selection-change="contractSelectionChange" style="margin-top: 10%;">
    2. <el-table-column type="selection" width="55" align="center" />
    3. <el-table-column label="id" prop="id" width="180%" v-if="false"/>
    4. <el-table-column label="合同编号" prop="contractNo" width="180%" />
    5. <el-table-column label="合同名称" prop="contractName" :show-overflow-tooltip="true" width="180%" />
    6. <el-table-column label="合同金额" prop="contractAmount" :show-overflow-tooltip="true" width="100%" />
    7. <!-- <el-table-column label="显示顺序" prop="roleSort" width="100" /> -->
    8. </el-table>

    单选事件

    1. contractSelectionChange(selection) {
    2. const val = selection;
    3. this.contarctSelect = val.map(item => item.id);
    4. //单选,contractList是表格数据,contractTable是el-table的ref
    5. this.contractList.forEach(item => {
    6. if (val[val.length - 1] === item) {
    7. this.$refs.contractTable.toggleRowSelection(item, true)
    8. } else {
    9. this.$refs.contractTable.toggleRowSelection(item, false)
    10. }
    11. });
    12. },

    默认选中事件

    1. //创建一个空数组用来存放默认数据
    2. let list = [];
    3. //response.data[8][0]请求返回的一条数据,将id保存起来(这步可有可无)
    4. this.contarctDefSelectId = response.data[8][0].id;
    5. //遍历表格的数据,再遍历需要在表格中反显的数据,两者的id一致
    6. //contractList是表格数据
    7. this.contractList.forEach((item) => {
    8. if (response.data[8][0].contractId == item.id) {
    9. // 把判断出来的默认表格数据push到创建的数组中
    10. list.push(item);
    11. }
    12. });
    13. //contractTable是表格ref
    14. this.$nextTick(()=>{
    15. if(list.length>0){
    16. list.forEach((row) => {
    17. this.$refs.contractTable.toggleRowSelection(row, true);
    18. })
    19. }
    20. })

    效果:

  • 相关阅读:
    【Go】excelize库实现excel导入导出封装(一),自定义导出样式、隔行背景色、自适应行高、动态导出指定列、动态更改表头
    java计算机毕业设计物流公司停车位管理源程序+mysql+系统+lw文档+远程调试
    【LeetCode每日一题】——141.环形链表
    Microsoft的PromptBench可以做啥?
    python+flask计算机毕业设计基于微信小程序的首饰商城系统(程序+开题+论文)
    云服务器和物理服务器的区别在哪
    Unreal基础概念
    Vue系列(一)之 Vue入门,Vue的生命周期以及前后端分离介绍
    推荐模型之多任务模型:ESMM、MMOE
    HTTP 协议请求头 If-Match、If-None-Match 和 ETag
  • 原文地址:https://blog.csdn.net/qq_53121751/article/details/133178172
  • 最新文章
  • 沪漂五周年了:我越来越迷茫了
    Agentic Skill Routing 实战:别再把所有 Skill 塞进 AI Agent 上下文
    MySQL-Seconds_behind_master的精度误差
    [MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
    AI的至暗历史:从万众期待到被政府撤资,AI的两次死亡徘徊
    Agent OS :五种驯服不确定性的范式
    PortSwigger SQL注入LAB11
    数据库即时编译JIT
    [Begin]AI Learn Data Day 0
    深度学习进阶(二十七)现代 LLM 的核心架构设计其二:SwiGLU
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号