iview表格嵌套select获取数据

最新推荐文章于 2022-07-22 10:05:24 发布

♛！♛

最新推荐文章于 2022-07-22 10:05:24 发布

阅读量207

点赞数

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44230635/article/details/88684548

版权

vue.js 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文介绍如何在Vue和iView框架下，实现表格内嵌套Select组件，并获取选中数据的方法。首先在组件返回的data中定义一个用于存储Select选择值的数组，接着在表格模板中配置Select组件，并为其绑定事件，以便捕获用户的选中操作。

摘要由CSDN通过智能技术生成

先在return里定义一个数组：

	dropdownItems:[],

然后在需要嵌套的 tb里面写上

{
       title: '机台号',
       tooltip:true,
       key: 'rackNo',
       align:'center',
       width:120,
       render: (h, params) => {
             return h('Select', {
                   style: {
                   width:"100%"
                   },
                   on: {
                         'on-change':(params) => {
                               // console.log(params)  // 触发循环数组里面的id                                                         
                         } 
                   },
             },
             [
             this.dropdownItems.map(function(rs){      //把map看作循环,rs看作循环的每一项
                   return h('Option',{
                         props:{
                               value:rs.deviceId
                         }
                   },rs.rackNo)
             })
             ]);
       },
 },

事件

 //获取select 机台号   
 devRack() {
     OrderServices.devRack().then(rs => {
           console.log(rs,'机台号');
           this.dropdownItems = rs.data;
      })
 }