vxe-table 实现表格单选数据

  • vxe-table 实现表格单选数据已关闭评论
  • 23 次浏览
  • A+
所属分类:Web前端
摘要

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

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

官网:https://vxetable.cn

vxe-table 实现表格单选数据

<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