Java前端知识积累——elementUI及其组件使用

el-table及其组件

vloading 添加页面加载效果

加载和切换页码时，没有加载动画会非常不好看，没有数据还会闪烁，加上加载动画会好看很多。el-table的v-loading属性可以指定显示隐藏loading效果，可以在加载的时候进行控制，element-loading-background属性可以定义加载动画的背景，element-loading-text属性指定加载提示文字，element-loading-spinner属性指定加载动画效果：

:table 表格绑定

 <el-table-column type="selection" width="50" align="center" /> 批量选择框

 

<el-table-column> 的prop属性

 <el-table-column> 的prop属性，绑定：data里面的属性列，key是为了提高渲染速度的唯一标识，一般可以与prop一致。

 <el-table-column> 的:show-overflow-tooltip属性

<el-table-column> 的:show-overflow-tooltip属性（注意：冒号：代表绑定，和data里面的变量绑定或者可以使用js表达式）

v-model

vue中经常使用到<input>和<textarea>这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

    v-model本质上是一个语法糖。如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入<p>{{ test}}</p>获取input数据，然后去修改input中数据会发现<p></p>中数据随之改变。

<div id="app">
  <input v-model="test">
  <!-- <input :value="test" @input="test= $event.target.value"> --><!--语法糖-->
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      test: '这是一个测试'
    }
  });
</script>

Upload组件

 

layout布局

:span使用

Type:flex justify:center 

 

Title居中

 按钮居中

Text-align:center

 栅格

 :span 每一列占多宽

 :gutter 每一列之间的距离

弹性布局

弹性布局（display:flex;）属性详解 - cdgogo - 博客园