iview表格中使用DropdownMenu组件

最新推荐文章于 2024-08-10 07:45:06 发布

水痕01

最新推荐文章于 2024-08-10 07:45:06 发布

阅读量4.3k

点赞数

分类专栏： vue 文章标签： jsx vue iview

本文链接：https://blog.csdn.net/kuangshp128/article/details/90402627

版权

vue 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

记一次在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;
        }
      }
    }
  ]
}