vue+elmentui的使用心得

vue和elmentUI的使用心得

使用customClass来覆盖样式。调整宽度。
二、elmentUI组件宽度自适应。
1.table: table通过min-width=‘100%’，来设定整个table的宽度，再利用min-width=“?%”来调整每一列的宽度，之和应该等于100.
2.form：form如果使用:inline=true,则不能设置自适应宽度，要想使用一行两列的话可以使用布局组件，如图。

三、https://www.cnblogs.com/xjcjcsy/p/7977966.html
时间日期选择器设置选定的事件范围。
四、关于input再弹出框中的使用，有时会出现输入框无法输入的现象，也无法删除。这时由于组件套用太深导致，这时，需要强制刷新。
可以再输入框上定义一个@input事件，在js里加上如下代码。（select选择器，也有这种现象，加上@change事件，代码如上。

五、关于elmentUI的进度条的使用。效果如下。

两个属性最为重要，percentage和format（）percentage原则上是0-100的数字，但是当我们使用后台传过来的数据，可以利用后台传的最大值。如：percentage=row/（maxrow/100），这样就保证后台传的所有数据处理后都在0-100，之间。而且最大值是100.
六、关于穿梭框的使用。当点击穿梭框中间的两个按钮时，会触发穿梭框的@change事件，这个事件会有三个参数，其中最重要的是direction（right，left）向左传还是向右传，然后来判断里面调用后台的那个接口，但是注意的是：左框数据是包含右框数据的，实际上数据是两个数组。左数组[{key,lebal,disabed}],右框的数据[key],这个应该是左框里子集。
七、在table里面添加图片

通过v-if根据传来的值判断使用哪张图片，而且src一定不用绑定。图片地址可以从html走，…/代表是上一级。
也可以添加文字，利用Span标签。
八、在table中添加空白块，

这时会有个Bug，是表格的最下方的滚动条会上移，通过重写一下class就好了如： 。
九、关于后台分页和前台分页，当后台数据量不大时，可以前台分页，

@current-change是当前页变化时触发的事件，当后台分页时，可以通过此事件，监听到当前页的变化，从而给后台的当前页就变化。触发新的查询接口。
十、table的列数据如果过长的话隐藏。 一句话搞定。
十一、elment的无限滚动使用心得。

注意的是：load从后台拿到数据后，一定要和其他的（table的数据）分开，否则会出现我滑动鼠标也会控制我table的数据加载。
十二、会用到的字符串的一些方法。substring(index，index),截取字符串，
indexof（）扫描字符串获得index。+：字符串拼接。