如何在iview组件中使用jsx
最近选用的框架iview表单组件的render写法让人有点不习惯,尤其是在写比较复杂的逻辑的时候,还是感觉模板式的写法比较方便且可读性较强。而render函数除了支持配置写法外,还支持jsx的写法。由于之前有用过react,因此对jsx并不陌生,可以直接上手。
1、安装插件
安装插件:transform-vue-jsx
如果需要使用v-model
还需要安装jsx-v-model
在babelrc
中配置
"plugins": [["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"}],
"transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
2、使用及注意事项
下面粘贴的代码是Table
组件的columns
的配置项,这里需要注意的有2点:
1、需要全局注册组件,如输入框组件不可以写成Input
必须写成i-input
;
2、事件绑定:如点击事件需要携程onOn-click
{
title: "关系名",
key: "name",
width: 180,
render: (h, params) => {
let { index, row } = params;
return (
<div>
{this.editShow && this.editIndex === index ? (
<span>
<i-input
placeholder="中文"
class="visual-name-input"
value={this.editRow.cnName}
onOn-blur={this.activeCellChange("cnName")}
/>
<i-input
placeholder="英文"
class="visual-name-input"
value={this.editRow.name}
onOn-blur={this.activeCellChange("name")}
/>
</span>
) : (
<span
class="overflow"
title={`${row.cnName}(${row.name})`}
>{`${row.cnName}(${row.name})`}</span>
)}
</div>
);
}
}
如何在iview组件中使用jsx的更多相关文章
- 如何在form组件中添加一个单选或者多选的字段
解决办法: 需要在增加的类里面加入choices 具体操作如下:
- React报错之组件不能作为JSX组件使用
正文从这开始~ 总览 组件不能作为JSX组件使用,出现该错误有多个原因: 返回JSX元素数组,而不是单个元素. 从组件中返回JSX元素或者null以外的任何值. 使用过时的React类型声明. 返回单 ...
- 如何在SSIS的脚本组件中访问变量
原文:如何在SSIS的脚本组件中访问变量 这是一个小问题,我们在SSIS的设计中很多地方都会用到变量,我习惯性地将"变量"和"表达式"称为SSIS的灵魂,虽然不 ...
- iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件
这篇文章主要介绍了iview的table组件中使用选择框,日期,可编辑表格,超链接等组件. 1.select选择组件 // tableColumn数组响应对象需要传入一个固定的option数组,如果该 ...
- IVIEW组件的render方法在Table组件中的使用
后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址: https://gitee.com/wlovet/table-project 一.Rende ...
- Laravel 如何在blade文件中使用Vue组件
Laravel 如何在blade文件中使用Vue组件 1. 安装laravel/ui依赖包 composer require laravel/ui 2.生成vue基本脚手架 php artisan u ...
- iView组件添加API中介绍的事件的方式(render方式添加事件)
iView组件好用,文档齐全,品质可靠稳定.最大的好处是使用了Vue框架,使很多数据绑定和交互问题变的轻松,是难得的开源前端组件.给作者点个赞.用这个组件来学习Vue.js也是不错的选择. 最近用的比 ...
- 如何在vue && webpack 项目中的单文件组件中引入css
引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapStat ...
- 详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...
随机推荐
- C语言数据结构之二叉树的实现
本篇博文是博主在学习C语言算法与数据结构的一些应用代码实例,给出了以二叉链表的形式实现二叉树的相关操作.如创建,遍历(先序,中序后序遍历),求树的深度,树的叶子节点数,左右兄弟,父节点. 代码清单如下 ...
- 2019年北航OO第二次博客总结
一.多线程电梯系列作业设计策略 1. 第一次作业——"FAFS傻瓜电梯" 第一次作业是先来先服务的"傻瓜电梯",我当时觉得这个设计未免太简单了,于是就在傻瓜电梯 ...
- Windows Server2008如何打开添加IIS服务器
https://jingyan.baidu.com/article/1612d500aa4594e20e1eeefc.html
- 小M的作物 最小割最大流
题目描述 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子有1个(就是可以种一棵作物)(用1...n编号). 现在,第i种作物种植在A中种植可 ...
- 通过源码看原理之 selenium
# selenium的历史1. selenium1.x:这个时候的selenium,使用的是JavaScript注入技术与浏览器打交道,需要Selenium RC启动一个Server,将操作Web元素 ...
- CentOS7 安装 Visual Code
官网下载 rpm 安装文件 运行 rpm -ivh 试一下 sudo rpm -ivh xxx.rpm 有可能弹出提出:libxx.so() need by xxxrpm ,反正意思是缺组件,去下载安 ...
- jackson构建复杂Map的序列化
1.序列化复杂的Map时,可能需要下面的方式 import com.fasterxml.jackson.databind.JavaType; import com.fasterxml.jackson. ...
- spring中排除某个类
在spring中可能需要排除某个类,做法是在spring配置文件中加入如下配置 <context:component-scan base-package="com.ias" ...
- css中字体单位px,pt,em,百分比之间的区别和用法
px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em 相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem 结合相对定位和绝对定位的优势,相对根元素htm ...
- java算法----------常用的加密算法
散列算法(单向散列,不可逆) MD5(Message Digest Algorithm 5) SHA(Secure Hash Algorithm) 对称加密(加密解密使用同一密钥,速度快) DES ...