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-cli设置publicPath小记

    vue-cli设置publicPath小记

    这篇文章主要介绍了vue-cli设置publicPath小记,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Vue3 + Element Plus 实现表格全选/反选/禁用功能(示例详解)

    Vue3 + Element Plus 实现表格全选/反选/禁用功能(示例详解)

    本文详细介绍了如何使用Vue3组合式API和ElementPlus实现表格的全选/反选/禁用功能,并分享了分页保持、视觉提示优化、性能优化等技巧,同时,还提供了常见问题的解决方案和扩展思考,帮助开发者构建功能丰富且用户体验良好的表格组件,感兴趣的朋友一起看看吧
    2025-03-03
  • Vue路由对象属性 .meta $route.matched详解

    Vue路由对象属性 .meta $route.matched详解

    今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue.js利用Object.defineProperty实现双向绑定

    vue.js利用Object.defineProperty实现双向绑定

    这篇文章主要为大家详细介绍了vue.js利用Object.defineProperty实现双向绑定,帮大家解析神秘的Object.defineProperty方法
    2017-03-03
  • Vue内部渲染视图的方法

    Vue内部渲染视图的方法

    这篇文章主要介绍了Vue内部渲染视图的方法,本文通过实例代码图文并茂的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Vue整合AdminLTE模板的方法

    Vue整合AdminLTE模板的方法

    这篇文章主要介绍了Vue整合AdminLTE模板的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue.js教程之计算属性

    Vue.js教程之计算属性

    Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接。这篇文章给大家介绍了Vue.js教程之计算属性,非常不错,感兴趣的的朋友一起看看吧
    2016-11-11
  • Vue3实现markdown-it支持chartjs、Echartjs、mermaid的渲染(附实例代码)

    Vue3实现markdown-it支持chartjs、Echartjs、mermaid的渲染(附实例代码)

    markdown-it-vue使用markdown-it作为Markdown数据解析引擎,整合多种markdown-it插件,并内置了一些自己的功能性插件,这篇文章主要介绍了Vue3实现markdown-it支持chartjs、Echartjs、mermaid渲染的相关资料,需要的朋友可以参考下
    2025-08-08
  • vue2.0实现列表数据增加和删除

    vue2.0实现列表数据增加和删除

    这篇文章主要为大家详细介绍了vue2.0实现列表数据增加和删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 如何在Vue中使用CleaveJS格式化你的输入内容

    如何在Vue中使用CleaveJS格式化你的输入内容

    这篇文章主要介绍了如何在Vue中使用CleaveJS格式化你的输入内容,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论