解决elementUI列表单选赋值以及拦截问题

本文主要解决了使用ElementUI时遇到的列表单选赋值问题,特别是当再次选择时出现的错误判断。在调试中发现,当选择第二项时,`multipleSelection.length`为2,因此正确的判断条件应为`>0`。同时,注意到在单独点击item或复选框时,数组行为不同,需要取数组最后一项以获取最新选择的数据。

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

 

当选择过第一行后,再次选择,会报没有选择企业,即判断空的条件是错的,我是这样写的

弹出层html代码

    <el-dialog :visible.sync="scCompanyPage.showDialog" width="70%">
      <el-input
        v-model="companylistQuery.queryData.companyname"
        placeholder="请输入企业名称"
        style="width: 250px; margin-right: 10px"
        clearable
      ></el-input>
      <el-button
        type="primary"
        @click="getCompanyList(1, 1)"
        icon="el-icon-search"
        v-waves
        >{
  { $t("table.search") }}</el-button
      >
      <el-table
        ref="multipleTable"
        v-loading="scCompanyPage.listLoading"
        :data="scCompanyP
### ElementUI 表格中实现单选框功能 为了在 ElementUI 的表格组件中实现单选框的功能,可以采用两种方式来达成目标。一种是在每一行添加一个自定义列用于放置单选按钮并控制其状态;另一种则是利用 `el-table` 组件自带的选择行为模拟单选效果。 #### 方法一:通过自定义列加入 Radio 单选框 当希望每行有一个单独的单选框时,可以在模板内创建一个新的列,并在此列里嵌入 `<el-radio>` 或者其他形式的单选控件。需要注意的是,在这种情况下,应该给每一个选项设置唯一的标识符作为 value 属性值以便区分不同的记录项[^1]。 ```html <template> <div id="app"> <el-table :data="tableData" @row-click="handleRowClick" ref="singleTable"> <!-- ... --> <el-table-column label="" width="50"> <template slot-scope="{ row }"> <el-radio v-model="radioSelection" :label="row.id">{{ '' }}</el-radio> </template> </el-table-column> <!-- ... --> </el-table> </div> </template> <script> export default { data() { return { radioSelection: null, tableData: [ /* 数据列表 */ ] }; }, methods: { handleRowClick(row) { this.radioSelection = row.id; } } }; </script> ``` 此代码片段展示了如何向表格中插入带有单选框的新列,并且监听点击事件更新当前被选中的行 ID 到 `radioSelection` 变量中去。 #### 方法二:基于 `highlight-current-row` 实现单选逻辑 如果不需要实际可见的单选框而只是想要达到一次仅能选择一行的效果,则可以直接依赖于 `el-table` 提供的 `highlight-current-row` 特性和相应的回调函数处理即可[^2]。 ```html <template> <div id="app"> <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange" ref="singleTable" > <!-- ... --> </el-table> </div> </template> <script> export default { data() { return { currentRow: null, tableData: [ /* 数据列表 */ ] }; }, methods: { handleCurrentChange(val) { this.currentRow = val; } } }; </script> ``` 上述例子说明了怎样借助内置特性轻松管理用户的交互体验——即每次只允许高亮显示一行,并自动取消之前的选择。 对于需要初始化某些特定行处于已选中状态的情况,可以通过遍历数据源找到符合条件的那一项并将它传递给相应的方法来进行预设。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值