Element UI的使用（一）

发表于

安装

npm i element-ui - S

引入Element

这里仅记录完整引入，按需引入可参加官方文档n

在 main.js 中写入以下内容：

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
    el: '#app',
    render: h => h(App)
});

以上代码便完成了 Element 的引入。注意，样式文件需单独引入。

内置过渡动画的使用

fade 淡入淡出

提供 el-fade-in-linear 和 el-fade-in 两种效果

使用方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<transition name="el-fade-in-linear">
  <!--以下是要呈现过渡效果的元素-->
  <div>...</div>
</transition>
```    

## zoom缩放
提供 `el-zoom-in-center` , `el-zoom-in-top` 和 `el-zoom-in-bottom` 三种效果<br>
使用方法：将 `<transition>` 标签的 `name` 属性改为以上值即可

## collapse折叠
使用 `<el-collapse-transition>` 标签实现折叠效果<br>
使用方法：
```html
<el-collapse-transition>
  <!--待实现折叠效果的元素-->
  <div>...</div>
  <div>...</div>
       ...
</el-collapse-transition>

Table 表格

基础表格

使用方法：

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" lable="姓名" width="180"></el-table-column>
  <el-table-column prop="address" lable="地址"></el-table-column>
</el-table>

<script>
  export default {
    data () {
      return {
        tableData: [
          {
            data: "...",
            name: "...",
            address: "..."
          },
          {
              data: "...",
              name: "...",
              address: "..."
          },
          {
              data: "...",
              name: "...",
              address: "..."
          }
        ]
      }
    }
  }
</script>

说明：当 <el-table> 标签的 data 属性注入对象数组后（用 v-bind 指令绑定 data属性），在 <el-table-column> 中用 prop 属性来对应 data 对象中的键名即可填入数据，用 lable 属性来定义表格的列名。用 width 属性来定义列宽（不需要加单位）。

带斑马纹的表格

<el-table> 标签的 stripe 属性可以创建带斑马纹的表格。它接受一个 Boolean，默认为false，设置为true即为启用。直接加上该属性则表示启用。

带边框的表格

默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用 <el-table> 的 border 属性，它接受一个 Boolean，设置为true即为启用。直接加上该属性则表示启用。

固定表头

只要在 <el-table> 标签中定义了 height 属性，即可实现固定表头的表格。

固定列

在要固定的列对应的 <el-table-column> 标签中使用 fixed 属性，它 Boolean 值或者 left 和 right，表示左边固定还是右边固定。

设置表格最大高度

可通过设置 <el-table> 标签的 max-height 属性来为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会生成一个滚动条。

多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
只需要在 <el-table-column> 里面嵌套 <el-table-column> ，就可以实现多级表头。最高级的表头对应的 <el-table-column> 可不设置 prop 属性。

表格排序

1.在 <el-table> 标签上设置 default-sort 属性（用 v-bind 指令绑定 default-sort 属性）设置默认的排序列和排序顺序（升序 ascending 或降序 descending ）

1
2
3
4
<!--以 prop 属性指定默认排序列（这里是 date ），order 属性指定默认排序顺序（这里是降序descending）-->
<el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order= 'descending'}">
  ...
</el-table>

注：如果没有指定 order ，则默认排序是 ascendind 升序。

2.将要提供排序功能的列对应的 <el-table-column> 加上 sortable属性

格式化列值

一般来说在后台返回的数据大多是英文或者数字。比如，1代表男；2代表女。在element-ui需要用到 <el-table-column> 的 formatter 属性（用 v-bind 指令绑定 formatter 属性），为该属性设定一个方法来处理并返回格式化后的列值。

例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<el-table :data="tableData" stripe border style="width: 100%">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址" :formatter="completeAddress">
  </el-table-column>
</el-table>

<script>
  export default {
    data () {
      return {
        tableData: [
          {
            name: 'L',
            age: 11,
            address: 1
          },
          {
            name: 'H',
            age: 12,
            address: 2
          },
          {
            name: 'M',
            age: 13,
            address: 3
          }
        ]
      }
    },
    methods: {
      completeAddress (row, column) {
        return `四川省成都市成华区 ${row.address} 号`; //以该格式返回该列的值
      }
    }
  }
</script>

注：formatter 属性的函数类型为 Function(row, column, cellValue, index)

对表格进行过滤

在 <el-table-column> 中设置 filters 属性和 filter-method 属性（要用 v-bind 指令绑定这两个属性）即可开启该列的过滤。

  • filters 是一个数组，数组中的元素要有 text 和 value 属性，即 Array[{text, value}] , filters 数组是一个过滤选项。text 是过滤选项的文本，value 是实际的值，只有当该列某行的值 === value 时才保留，否则过滤。
  • filter-method设定一个方法，该方法原型为 Function(value, row, column)，只有当该方法返回 true 时某行才保留，否则过滤。
    注：这两个属性要一起使用。

    例：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <el-table :data="tableData" stript border :default-sort="{prop: 'age', order='descending'}">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄" sortable 
      :filters="[{text: 11, value: 11}, {text: 12, value: 12}, {text: 13, value: 13}]" :filter-method="filterAge"></el-table-column>
    </el-table>

    <script>
      export default {
        data () {
          return {
            tableData: [
              {
                name: 'L',
                age: 11
              },
              {
                name: 'H',
                age: 12
              },
              {
                name: 'M',
                age: 13
              },
              {
                name: 'A',
                age: 12
              },
              {
                name: 'B',
                age: 11
              }
            ]
          }
        },
        methods: {
          filterAge (value, row, column) {
            const property = column['property'];
            return row[property] === value;
          }
        }
      }
    </script>

展开行

当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

通过设置 <el-table-column> 标签的 type="expand 属性和 Scoped slot 可开启展开行功能，<el-table-column> 的模板会被渲染成为展开行的内容。

未完待续……