element:table 单选

简介: element:table 单选

一、效果如图

二、实现步骤

2.1、开启多选

<el-table-column
      type="selection"
      align="center"
      width="55">

2.2、隐藏多选框

.el-table__header .el-checkbox{ // 找到表头那一行,然后把里面的复选框隐藏掉
    display:none!important;
  }

2.3、select事件调用:

table通过el-table二次封装,本质还是el-table

2.4、 实现单选

handleSelectionChange(selection,row) {
      // 清空所有选中
      this.$refs.singleTable.$refs.table.clearSelection()
      if (row) {
        // 确保更新
        this.$nextTick(() => {
          // 选中当前
          this.$refs.singleTable.$refs.table.toggleRowSelection(row, true)
        })
      }
      // 返回数据给父组件
      this.$emit('selection', row)
    },

最终实现如文章开始图片效果

2.5、禁止选中某行数据

{
    type: 'selection',
    selectable: row => {
      if(row.status === 1){
          return false // 禁止选中
      } else {
          return true // 可以选中  
      }
    }
},

三、欢迎交流指正。

虽然很简单,但值得记录,不以事小而不为。

四、参考文档

Element - The world's most popular Vue UI framework

相关文章
|
6月前
|
前端开发 微服务
Element-Plus 表格 el-table 如何支持分页多选
Element-Plus 表格 el-table 如何支持分页多选
|
前端开发 JavaScript Java
Element-UI中Select选择器讲解(el-select详解)
案例详解Element-UI中Select选择器讲解,手把手教学!
1077 0
Element-UI中Select选择器讲解(el-select详解)
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
6001 0
Element el-select 选择器(下拉框)详解
|
4月前
el-select 全选
el-select 全选
39 0
|
6月前
|
数据库
element多选框select下拉框数据回显的问题value.push is not a function
element多选框select下拉框数据回显的问题value.push is not a function
541 1
|
6月前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
element-ui中Select 选择器value-key的使用
element-ui中Select 选择器value-key的使用
|
6月前
详解element-ui el-table表格中勾选checkbox(selection),高亮当前行高亮某一行(某一行设置特殊的样式)
详解element-ui el-table表格中勾选checkbox(selection),高亮当前行高亮某一行(某一行设置特殊的样式)
|
开发者
element el-table固定列凹陷问题
element el-table固定列凹陷问题
107 0
|
JavaScript
Element el-check 多选框详解
本文目录 1. 用途 2. 普通多选框 3. 带边框的多选框 4. 多选框组 5. 按钮样式的多选框组 6. 多选框组选中数量限制 7. 选项通过变量自动生成 8. 小结
965 0
Element el-check 多选框详解