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);
                })
              }
            })

效果:

相关推荐
endlesskiller15 小时前
3年前我不会实现的,现在靠ai辅助实现了
前端·javascript
Zyx200716 小时前
用 JavaScript 打造 AI 大脑:前端开发者的新时代——基于 Brain.js 的浏览器端 NLP 实战
javascript·机器学习
麦麦大数据16 小时前
F035 vue+neo4j中医南药药膳知识图谱可视化系统 | vue+flask
vue.js·知识图谱·neo4j·中医·中药·药膳·南药
麦麦大数据16 小时前
F037 vue+neo4j 编程语言知识图谱可视化分析系统vue+flask+neo4j
vue.js·flask·知识图谱·neo4j·可视化·编程语言知识图谱
非凡ghost16 小时前
ToDoList(开源待办事项列表) 中文绿色版
前端·javascript·后端
用户61204149221316 小时前
html+layui+node+js做的个人财务管理系统
javascript·后端
Sheldon一蓑烟雨任平生16 小时前
Vue3 组件 v-model
vue.js·vue3·v-model·definemodel·v-model修饰符·自定义双向绑定组件·多个v-model绑定
OpenTiny社区16 小时前
如何使用 TinyEditor 快速部署一个协同编辑器?
前端·vue.js
胖虎26516 小时前
打造梦幻粒子动画效果:基于 Vue 的 Canvas 实现方案
vue.js
皓月Code17 小时前
第三章、React项目国际化介绍(`react-i18next`)
前端·javascript·react.js·1024程序员节