element-ui table 表格控件实现单选功能

这篇具有很好参考价值的文章主要介绍了element-ui table 表格控件实现单选功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🍎需求

今天遇到一个需求,感觉挺简单的,需求如下:
element-ui table 表格控件实现单选功能
就是一个表格,在表格的前面加上一个选择框,注意:只能单选

🍋发现问题

然后我就去element ui上粘代码:
虽然element ui上有对应的单选表格,可是并不符合我的需求
element-ui table 表格控件实现单选功能
然后我又发现下面有一个多选的表格,样式虽然相似,可是还是不符合我的需求:
element-ui table 表格控件实现单选功能

🍉解决问题

最终我还是面向了百度编程,这位老哥的代码帮了我大忙,再次特别感谢

下面给大家展示一个小的demo,直接粘贴代码就可以看到效果:

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @row-click="singleElection"
      highlight-current-row
    >
      <el-table-column align="center" width="55" label="选择">
        <template slot-scope="scope">
          <!-- 可以手动的修改label的值,从而控制选择哪一项 -->
          <el-radio class="radio" v-model="templateSelection" :label="scope.row.id"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="id" label="编号" width="80"> </el-table-column>
      <el-table-column align="center" prop="date" label="日期" width="150"> </el-table-column>
      <el-table-column align="center" prop="name" label="姓名" width="80"> </el-table-column>
      <el-table-column align="center" prop="address" label="地址" width="250"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "0001",
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "0002",
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: "0003",
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "0004",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      //   当前选择的行的id
      templateSelection: "",
      //   当前选择的行的数据
      checkList: [],
    }
  },
  methods: {
    singleElection(row) {
      this.templateSelection = row.id
      this.checkList = this.tableData.filter((item) => item.id === row.id)
      console.log(`该行的编号为${row.id}`)
    },
  },
}
</script>

最终的效果如下图所示,想必大家也都知道了该如何照猫画虎了吧,😛😛😛:
element-ui table 表格控件实现单选功能
最后,如果这篇文章对您有用的话,记得👍+⭐️哦!!!👀文章来源地址https://www.toymoban.com/news/detail-503237.html

到了这里,关于element-ui table 表格控件实现单选功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui table-自定义表格某列的表头样式或者功能

    自带表格 自定义表格某列的表头样式或者功能

    2024年02月03日
    浏览(50)
  • Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页

    Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页:         当table的数据量比较大的时候,一个屏幕展示不出全部的数据,这个时候就需要分页显示。而多数情况下都是做的后端分页,就是将分页参数和查询条件一并传到后端,后端将当前页要

    2024年01月20日
    浏览(54)
  • Element-ui中表格el-table图片预览效果实现(非常实用)

    🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅  文末获取源码联系 🏆先展示效果:   🏆使用的是下面这个插

    2024年02月11日
    浏览(57)
  • 基于element-ui的table实现树级表格操作及单元格合并

    如题,公司业务需求,数据结构比较复杂,需要在一张表内实现多级树状数据展示及同属性的单元格合并,并在表格内实现增删改操作。 网上翻阅了很多实例,没有能解决所有需求的案例,于是自己实现了一套。 时间匆忙,逻辑有优化的地方还请无偿指出! 最终效果如下

    2024年02月14日
    浏览(46)
  • element-ui表格Table详解

    先给大家展示一下效果 Table 属性  属性名 说明 类型 可选值 默认值 data 显示的数据 array — — height Table 的高度, 默认为自动高度。 如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则这个高度会设置为 Table 的 style.height 的值,Table 的高度会受控于外部样式。 s

    2024年02月07日
    浏览(46)
  • Element-ui 动态Table表格

    最近在做相关需求,感觉太多的重复代码,网上也很多这种动态的,写的很好,所以我借鉴了很多大佬的动态table表格,结合需求,完成了我自己需要的table。 1.config文件夹相关配置文件 2.一个用来配置的’pageTable.vue’文件 其实table 表格里面的align也可以动态,我这里偷懒了

    2024年02月11日
    浏览(38)
  • vue使用Element UI时,el-table表格整行操作单选

    需求:表格复选修改为单选,只可选择一个;不满足条件的不可勾选;可进行整行操作 注意使用的方法. 需求由复选改为单选后, 左上角全选框要进行隐藏 ,复选框也变成单选框,这里是通过css样式进行调整的 勾选复选框的select和整行操作的row-click可以共用同一个方法,

    2024年02月14日
    浏览(43)
  • 随手记:使用sortable.js 实现element-ui el-table 表格上下拖拽排序

    需求场景: 表格可以实现上下拖拽row实现新排序 首先,安装sortable.js  引入表格排  全局挂在组件 使用页面引入 使用sortable.js表格一定要有唯一的row-key,一般绑定的是id,不然拖拽会不生效 data声明 sortableContainer: null,为的是后面如果有需要可以做销毁操作   因为我这里是表

    2024年02月22日
    浏览(52)
  • Vue Element-ui Table表格排序

    一.表格中有时候会有排序的需求,如果只针对当前页进行排序,那么前端就可以实现排序,在对应需要排序的字段中,使用sortable字段即可。 二.存在分页的情况时,前端仅仅使用sortable当前页排序已经不能满足我们的需求,无法对所有数据进行排序。这时候我们就要使用后端

    2024年02月11日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包