iview表格中使用DropdownMenu组件

记一次在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;
          }
        }
      }
    ]
  }
  复制代码