基于Vue.js的iView组件库table组件内render 里面 tab 里面的单选

先上效果图：

打印选中的结果：

代码如下：

<template><div><!-- 列表信息 -->    <div class="listfile"><i-table border ref="selection" :columns="columns2" :data="data3"></i-table><div style="margin: 10px;overflow: hidden"><div style="float: right;"><Page :total="dataCount" :page-size="20" show-total :current="currentPage"></Page></div></div></div></div>
</template><script>export default {data () {return {dataCount:1,// 初始化信息总条数currentPage:1, //当前页pageSize:20,// 每页显示多少条columns2: [{type: 'selection', width: 60,align: 'center'},{title: '使用状态',key: 'usestate',width: 200,align: 'center',render:(h, params) => {return h('RadioGroup',{props: {value: params.row.usestate //这里的value值对应Radio中的label中的值},on:{"on-change":(val)=>{params.row.usestate = val;console.log(val,"测试radio选中的项",params.row.usestate);}}}, [h('Radio', {style:{'margin-right': '20px'},props:{"label":"1"},}, '未使用'),h('Radio', {props:{"label":"2"}}, '已使用')]);}},],//列表初始数据data3: [{usestate: '1',},{usestate: '2',}],}},methods: {},created(){},mounted(){},}
</script><style></style>

注意事项：

变量传值时，因为用的是tab，获取时只能是：usertate: params.row.usestate;

所以传值时强制传：

this.data3[params.index].usestate = val;

注意事项②：

tab 上不显示 radio 选中的值是因为是：指针除了问题；

这时候需要转换一下：

this.data3 = JSON.parse(JSON.stringify(this.data3));

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140

基于Vue.js的iView组件库table组件内render 里面 tab 里面的单选相关推荐

iview构建基本html页面,使用vue-cli创造基于vue.js的iview工程
1.vue-cli 介绍 vue-cli是一个vue.js提供的脚手架,可以快速构造项目结构. vue-cli本身集成了多种项目模板: 1．simple 很少简单,只有一个html页面 2．webp ...
iView 3.3.0 发布，基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...
iView 3.4.0 发布，基于 Vue.js 的企业级 UI 组件库
百度智能云云生态狂欢季热门云产品1折起>>> iView 3.4.0 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品 ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui
原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹整编综合自:https://didi.github.io/cube-ui/ ...
基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
说说如何基于 Vue.js 实现表格组件
我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在 ...
vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...

基于Vue.js的iView组件库table组件内render 里面 tab 里面的单选

基于Vue.js的iView组件库table组件内render 里面 tab 里面的单选相关推荐

最新文章

热门文章