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单选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • Vue点击切换颜色的方法

    Vue点击切换颜色的方法

    今天小编就为大家分享一篇Vue点击切换颜色的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 加载 vue 远程代码的组件实例详解

    加载 vue 远程代码的组件实例详解

    vue-cli 作为 Vue 官方推荐的项目构建脚手架,它提供了开发过程中常用的,热重载,构建,调试,单元测试,代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发
    2017-11-11
  • element上传组件循环引用及简单时间倒计时的实现

    element上传组件循环引用及简单时间倒计时的实现

    这篇文章主要介绍了element上传组件循环引用及简单时间倒计时的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue ajax 拦截原理与实现方法示例

    vue ajax 拦截原理与实现方法示例

    这篇文章主要介绍了vue ajax 拦截原理与实现方法,结合实例形式分析了vue.js基于ajax拦截实现无刷新登录的相关原理与操作技巧,需要的朋友可以参考下
    2019-11-11
  • 详解vue2.0+axios+mock+axios-mock+adapter实现登陆

    详解vue2.0+axios+mock+axios-mock+adapter实现登陆

    这篇文章主要介绍了详解vue2.0+axios+mock+axios-mock+adapter实现登陆,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 怎样在vue项目下添加ESLint的方法

    怎样在vue项目下添加ESLint的方法

    这篇文章主要介绍了怎样在vue项目下添加ESLint的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue中如何使用base64编码和解码

    Vue中如何使用base64编码和解码

    这篇文章主要介绍了Vue中如何使用base64编码和解码问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • 十个有用的自定义Vue钩子函数总结

    十个有用的自定义Vue钩子函数总结

    这篇文章主要为大家介绍了十个Vue.js中有用的自定义钩子,让我们的代码更加好看。文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2022-04-04
  • Vue组件的实现原理详细分析

    Vue组件的实现原理详细分析

    在日常业务开发中我们会经常封装一些业务组件,下面这篇文章主要给大家介绍了关于Vue组件的实现原理,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • Vue高级组件之函数式组件的使用场景与源码分析

    Vue高级组件之函数式组件的使用场景与源码分析

    Vue提供了一种称为函数式组件的组件类型,用来定义那些没有响应数据,也不需要有任何生命周期的场景,它只接受一些props来显示组件,下面这篇文章主要给大家介绍了关于Vue高级组件之函数式组件的使用场景与源码分析的相关资料,需要的朋友可以参考下
    2021-11-11

最新评论