Element ui中 el-table同时使用 type=“selection“ 和type=“index“时,设置序号的不显示了

项目中使用element ui 中el-table的多选项及序号时发现序号不显示了,单独设置一个可以显示

例如只设置序号或者只设置多选项可以正常显示

// 只设置多选项列时可以正常显示
<el-table>
   <el-table-column type="selection" width="50"></el-table-column>
......
<el-table>

// 只设置序号列时也可以正常显示
<el-table>
   <el-table-column lable="序号" type="index" width="50"></el-table-column>
......
<el-table>

// 同时设置选择项跟序号时页面不显示序号 

<el-table>
   <el-table-column type="selection" width="50"></el-table-column>
   <el-table-column lable="序号" type="index" width="50"></el-table-column>
......
<el-table>

此时换种写法就可以了代码如下

<el-table>
   <el-table-column type="selection" width="50"></el-table-column>
   <el-table-column lable="序号" type="index" width="50">
     <template slot-scope="scope">
        {{ scope.$index+1 }}
     </template>
   </el-table-column>
......
<el-table>

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: el-table-column type=selectionElement UI 的一个表格列组件,用于显示一个复选框,用于选择表格的行。当用户选择复选框,可以通过 v-model 绑定的变量获取选的行数据。 ### 回答2: 在 Element UIel-table 组件,有一个非常实用的功能就是使用 el-table-columntype=selection 属性,来实现多选的功能。 首先,我们需要在外部使用一个数组来存储所选的行的数据。例如我们设定一个 selectedRows 的数组,用于存储所有已选的行的数据。 其次,我们需要在 el-table-column 设置 type=selection 属性,来启用多选的功能。这候我们可以看到每一行的前面都出现了一个 checkbox,用于选当前行的数据。 接下来,我们需要设置 el-table 的 @selection-change 事件,来监听所有选行数据的变化。在事件处理函数,我们可以通过 el-table 提供的 getSelection 方法来获取当前选的所有行的数据,将其赋值给 selectedRows 数组。 最后,我们就可以在界面上使用 selectedRows 数组来展示所有已选的数据,比如在右侧的侧边栏输出所选的行的详细信息等。 使用 el-table-columntype=selection 属性,可以帮助我们轻松地完成复杂的多选操作,大大提升了用户体验和开发效率。同,我们也需要注意 selectedRows 数组的清空和重置,来避免不必要的数据混淆和错误。 ### 回答3: el-table-column type=selectionElement UI非常常见的一个组件。这个组件是一个带有复选框的表格列,使用户可以通过选多行来进行相关操作。 使用这个组件非常简单,只需要在定义表格列添加type=selection即可。在实际使用,我们可以将选的行数据存储在一个数组,然后通过对这个数组进行操作来实现批量操作。 比如,我们可以通过点击一个按钮来进行批量删除操作,只需要遍历选的行数据,将其从数据源删除即可。同,我们还可以通过选的行数据来进行其他操作,比如导出选的数据、修改选的数据等。 对于业务较为复杂的应用场景,我们还可以通过自定义选状态的样式来加强交互效果,同还可以通过修改复选框的属性来限制用户的操作,比如只允许选择某一行而不是多行。 总之,el-table-column type=selection是一个非常方便的组件,可以大大提高数据操作的效率和用户体验。在实际项目开发,我们可以根据需求灵活运用,达到最佳效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值