• 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. })

    效果:

  • 相关阅读:
    深度学习第一次作业 - 波士顿房价预测
    [CTF] python的pip源更改及常用python库
    Apache Pulsar工作原理
    【Houdini】如何使用Houdini渲染流体?
    2022/6/29学习总结
    第一推动|2023年VSCode插件最新推荐(54款)
    hadoop 2.0 MapReduce全方面了解
    【软件设计师21天-考点整理】4)计算机系统构成及硬件基础知识
    【LeetCode刷题】1两数之和
    如何获取小程序运行能力,知道Finclip就够了?
  • 原文地址:https://blog.csdn.net/qq_53121751/article/details/133178172