标签：vue return transform params 组件 DropdownMenu jsx iview

记一次在vue项目中在iview表格组件中使用DropdownMenu组件

一、一般写法(网上很多,可以找到)

二、在vue中使用jsx语法来写

• 1、安装包包地址

  npm install babel-plugin-transform-vue-jsx
  

• 2、在项目下的.babelrc配置插件

  {
    "presets": ["env"],
    "plugins": [
      "transform-object-rest-spread",
      "transform-vue-jsx",
      [
        "transform-runtime",
        {
          "helpers": false,
          "polyfill": false,
          "regenerator": true,
          "moduleName": "babel-runtime"
        }
      ]
    ]
  }
  
  

• 3、在表格中使用

  import { Dropdown, DropdownMenu, DropdownItem, Icon } from 'iview';
  export const contactTableColumns = (c) => {
    return [
      {
        title: 'Nama Lengkap',
        key: 'name',
        align: 'left'
      },
      {
        title: 'Send whatsapp message',
        key: '',
        align: 'center',
        render: (h, params) => {
        	  // 判断当前用户是否开通whatsApp
          if (params.row.isWhatsApp) {
            return (
              <Dropdown onOn-click={(val) => c.sendMsg(val, params.row)}>
                <a href="javascript:void(0)">
                  Select template
                <Icon type="ios-arrow-down"></Icon>
                </a>
                <DropdownMenu slot="list">
                  {
                    c.msgTemplateList.map(item => <DropdownItem name={item.key} key={item.key}>{item.value}</DropdownItem>)
                  }
                </DropdownMenu>
              </Dropdown>
            )
          } else {
            return null;
          }
        }
      }
    ]
  }
  

标签：vue,return,transform,params,组件,DropdownMenu,jsx,iview
来源： https://blog.51cto.com/u_3409716/2904728

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。