Vue Element-UI中el-table实现单选的示例代码

 更新时间:2023年12月15日 09:04:04   作者:梦之归途  
在element-ui中是为我们准备好了可直接使用的单选与多选属性的,本文主要介绍了Vue Element-UI中el-table实现单选的示例代码,具有一定的参考价值,感兴趣的可以了解一下

实现方式: 给el-table-column设置el-radio 

<div class="default-page">
          <el-table :data="accountList" v-loading="loading" highlight-current-row @current-change="handleCurrent" border height="250px">
        <el-table-column width="60px">
          <template v-slot="scope">
            <!-- label值要与el-table数据id实现绑定 -->
            <el-radio v-model="unitInfo.userId" :label="scope.row.userId" @change="handleRowChange(scope.row)">{{""}}</el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" />
        <el-table-column prop="userId" label="账号编号" />
        <el-table-column prop="username" label="账号名称" />
        <el-table-column prop='status' label="账号状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | filters('availableType')">{{ scope.row.status | filters('availableValue')}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
</div>
export default {
  data() {
    return {
    }
  },
  methods: {
    // 方法一:与el-table @current-change方法 绑定
    handleCurrent (val) {
      if (val) {
        this.unitInfo.userId = val.userId
        this.unitInfo.man = val.username
      }
    },
    // 方法二:与el-radio @change方法 绑定
    handleRowChange (data) {
      if (data) {
        this.unitInfo.userId = data.userId
        this.unitInfo.man = data.username
      }
    }
  }
}

到此这篇关于Vue Element-UI中el-table实现单选的示例代码的文章就介绍到这了,更多相关Element el-table单选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • Vue3获取和操作DOM元素的项目实践

    Vue3获取和操作DOM元素的项目实践

    在Vue3中,有时我们需要直接操作DOM节点,本文主要介绍了Vue3获取和操作DOM元素的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • 基于Vue如何封装分页组件

    基于Vue如何封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能,接下来通过本文给大家分享一个封装分页组件的方法,一起看看吧
    2016-12-12
  • vscode 插件开发 + vue的操作方法

    vscode 插件开发 + vue的操作方法

    这篇文章主要介绍了vscode 插件开发 + vue的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • vue的简介及@vue/cli 脚手架的使用示例

    vue的简介及@vue/cli 脚手架的使用示例

    vue 是一个 渐进式的javascript框架,脚手架是一个通用概念,帮助搭建项目的工具,本文以vue2为例结合实例代码给大家详细讲解,感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • vuex中Getter的用法详解

    vuex中Getter的用法详解

    这篇文章主要给大家介绍了关于Vuex中Getter的基本使用教程,getter相当于Vuex中的计算属性 对 state 做处理再返回,本文通过示例代码将Getter介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • 在Vue中使用highCharts绘制3d饼图的方法

    在Vue中使用highCharts绘制3d饼图的方法

    本篇文章主要介绍了在Vue中使用highCharts绘制3d饼图的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 详解VS Code使用之Vue工程配置format代码格式化

    详解VS Code使用之Vue工程配置format代码格式化

    这篇文章主要介绍了详解VS Code使用之Vue工程配置format代码格式化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue element-ui 绑定@keyup事件无效的解决方法

    vue element-ui 绑定@keyup事件无效的解决方法

    遇到vue element-ui 绑定@keyup事件无效的问题怎么解决?下面小编就为大家分享一篇vue element-ui 绑定@keyup事件无效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue项目中components组件(模板)的使用及说明

    Vue项目中components组件(模板)的使用及说明

    这篇文章主要介绍了Vue项目中components组件(模板)的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 详解Vue3怎么使用element-plus

    详解Vue3怎么使用element-plus

    本文主要介绍了Vue3怎么使用element-plus,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论