【Element-ui】每个类只有一个默认设置选项

最新推荐文章于 2025-06-11 12:21:17 发布

小王师傅66

最新推荐文章于 2025-06-11 12:21:17 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识

本文链接：https://blog.youkuaiyun.com/WKX18330698534/article/details/78997970

前端知识专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在 Element-UI 的表格中实现默认项的选择功能，通过简单的代码示例展示了如何确保一个供应商仅能设置一个默认联系人或银行账户。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果图

二、实现过程

<el-table-column prop="isDefault" label="默认" width="130">
    <template slot-scope="scope">
        <el-checkbox @change="contactSetDefault(scope.$index)" true-label="true" false-label="false" v-model="scope.row.isDefault">            </el-checkbox>
    </template>
</el-table-column>

// 银行设置默认
    bankSetDefault (index) {
      this.setDefault(this.supplierObjs.supplierBankAccount, index)
    },

// 设置默认，一个供应商只能有一个默认的联系人或银行账户
    setDefault (data, index) {
      data.forEach((element, i) => {
        if (index !== i) {
          this.$set(element, 'isDefault', '否')
        }
      })
    },

三、总结

一开始看着效果有点难实现，理清了思路也就不难了，希望能给正在使用element-UI的朋友带来帮助