首页 > 其他分享 >vxe-table 实现表格单选数据

vxe-table 实现表格单选数据

时间:2024-11-28 12:12:42浏览次数:6  
标签:name vxe age sex 单选 address table role id

在 vxe-table 启用列单选功能,通过参数 column.type = 'radio' 设置类型为单选类型就可以了。

官网:https://vxetable.cn

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
export default {
  data () {
    const gridOptions = {
      border: true,
      height: 300,
      showOverflow: true,
      radioConfig: {
        labelField: 'name',
        highlight: true
      },
      columns: [
        { type: 'radio', title: 'Name', width: 300 },
        { field: 'id', title: 'ID' },
        { field: 'age', title: 'Age' },
        { field: 'address', title: 'Address' }
      ],
      data: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
        { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' }
      ]
    }

    return {
      gridOptions
    }
  }
}
</script>

https://gitee.com/xuliangzhan/vxe-table

标签:name,vxe,age,sex,单选,address,table,role,id
From: https://www.cnblogs.com/qaz666/p/18574024

相关文章

  • vxe-table 使用表格多选数据、复选框多选
    在vxe-table启用列多选功能,通过参数column.type='checkbox'设置类型为多选类型就可以了。官网:https://vxetable.cn<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><script>export......
  • 【AIGC】适合小白的Stable Diffusion教程:图生图
    本文主要分为四部分:\1.图生图原理\2.图生图流程介绍\3.随机种子Seed的应用\4.图生图应用场景今天开始讲解SD的「图生图」功能。你一定看到过下面这样的例子,通过原图通过AI绘画加工成自己想要的图片。在Midjourney中叫「垫图」,而在StableDiffusion中我们叫「......
  • vxe-table 实现表格数据分组,按指定字段数据分组
    实现表格数据分组,按指定字段数据分组,使用树结构来实现分组功能。官网:https://vxetable.cn<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><script>importXEUtilsfrom'xe-utils'constal......
  • c++QTableWidget横向填充满他的空间,且均匀分布
    1.概要//设置所有列均匀分布并填充满整个空间QHeaderView*header=tableWidget->horizontalHeader();for(inti=0;i<tableWidget->columnCount();++i){header->setSectionResizeMode(i,QHeaderView::Stretch);}2.内容在Qt中,如果你希望......
  • vxe-table grid 分享实现单元格编辑表格表尾合计实时计算
    在使用vxe-grid时,需要实现表尾合计功能,通过单元格编辑之后,实时自动计算表尾合计的值,自动更新表尾合计数据,实现方式通过监听change事件,从而实现实时更新合计功能。官网:https://vxetable.cn可以使用插槽模板,也可以使用配置式,下面是配置式的用法:<template><div><vxe-b......
  • 用 Vue2 打造防诈骗问答系统:完整代码与项目实战 Vue2 实现交互式问答页面:单选、多题切
    以下是构建一个防诈骗测试页面的完整代码实现,包含单选题功能,并可记录用户选择的答案,所有功能均基于Vue2实现:完整代码<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initia......
  • GaussDB数据库SQL系列-LOCK TABLE
    一、前言GaussDB是一款高性能、高可用的分布式数据库,广泛应用于各类行业和场景。在GaussDB中,锁是实现并发控制的关键机制之一,用于协调多个事务之间的数据访问,确保数据的一致性和完整性。本文将围绕GaussDB数据库的LOCKTABLE做一简单介绍。二、GaussDB数据库的锁GaussDB提供了......
  • 【小白学机器学习35】数据表:整洁数据表,交叉表/列联表,以及两者转化pd.pivot_table()
    目录1虽然这是个很基础的知识,但是我觉得有必要记录下2整洁数据表3交叉数据表的2种形式3.0交叉表的名字3.12维的交叉表3.2用2维表现3维的3.3上述内容,具体的markdown文本4交叉数据表4.1交叉数据表并不整洁4.2但是交叉表也很有用:比如求联合概率+边缘概率4.3......
  • AntDesign - Vue Table组件 实现动态表格、列宽计算(方式二)
    朋友们,按照上文(方式一)思路,实现了动态表格和表头分组,这篇按照方式一的需求,扩展出另一种代码写法;一、表格头表格columns还是定义在data(){}中,初始化静态列数组,配置项列由后端接口返回(第二点写动态配置项代码);在方式一基础上加了筛选菜单功能,因此变化代码部分如下......
  • ULID(Universally Unique Lexicographically Sortable Identifier,通用唯一词典分类标识
    ULID(UniversallyUniqueLexicographicallySortableIdentifier,通用唯一词典分类标识符)是一种用于生成全局唯一且可以lexicographically(字典顺序)排序的标识符。它设计的目标是能够同时满足以下几个特点:全局唯一性:ULID生成的标识符具有足够的唯一性,能够在分布式系统中广泛应用......