el-table-column默认选中一个复选框和只能单选事件

表格代码

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

单选事件

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

默认选中事件

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

效果:

相关推荐
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰6 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
薛一半8 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
过期的H2O28 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax