iview表格中使用DropdownMenu組件

記一次在vue項目中在iview表格組件中使用DropdownMenu組件

1、通常寫法(網上不少,能夠找到)

2、在vue中使用jsx語法來寫

• 一、安裝包包地址

  npm install babel-plugin-transform-vue-jsx
  複製代碼

• 二、在項目下的.babelrc配置插件

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

• 三、在表格中使用

  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;
          }
        }
      }
    ]
  }
  複製代碼