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;
            }
          }
        }
      ]
    }