当前位置:   article > 正文

element el-table 实现单选_el-table实现单选

el-table实现单选

 template:

  1. <el-table ref="equipment" highlight-current-row :data="equipmentList" stripe @selection-change="handleSelectionChange" @current-change="row => $refs.equipment.toggleRowSelection(row)">
  2. .....
  3. </el-table>

methods: 

  1. // 单选框选中数据
  2. handleSelectionChange(selection) {
  3. if (!selection[0]) {
  4. this.form.code = ''
  5. this.form.name = ''
  6. }
  7. this.currentRow = selection[0] || {};
  8. if (selection.length > 1) {
  9. this.$refs.equipment.clearSelection();
  10. this.$refs.equipment.toggleRowSelection(selection.pop());
  11. }
  12. },

CSS

  1. <style lang="scss" scoped>
  2. ::v-deep {
  3. .el-table__header .el-checkbox{
  4. display:none!important;
  5. }
  6. .el-table__header-wrapper .el-table-column--selection.el-table__cell .cell:before {
  7. content: "单选";
  8. }
  9. }
  10. </style>

效果:

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号