element组件库

墨染灬
435 阅读3分钟

常见的vue技术栈组件库

element组件库

elementui是做PC项目的首选

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官方地址：element.eleme.cn/#/zh-CN

ElementPlus(适配Vue3.0的版本)官方地址： element-plus.org/#/zh-CN

在项目中安装elementUI

npm i element-ui -S

  • -S: 是--save的简写，表示 这个包是生产依赖， 表示项目上线也要使用这个包。

  • -S: 是可以省略不写的。

  • 如果要安装开发依赖，则要加 -D。

main.js中引入并注册

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Table组件的基础使用

详见官网官方demo

<template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  }
}
</script>

数据源由table组件的data属性来指定（不需要我们自己用v-for指令来循环）

  1. 行(data)，决定表格的数据。它是数组，数组中的每一个元素是一个对象，表示一行。
  • 在el-table使用data属性
  1. 列，决定表格结构。 列由el-table-column决定，下面有三个属性需要掌握

  • 在el-table-item上使用prop属性

    • label：决定当前列显示出的标题

    • prop：决定当前列数据的来源。对于表格来说， 它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名

    • width: 用来设置列的宽度。如果不设置，它会自适应

    prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值

image-20210508193035481.png

table组件-自定义列-插槽

表格单元格中，不光想要渲染文本，可能会渲染一些自定义的内容: 图片，操作按钮

使用template标签包裹我们自定义渲染的内容，其实用的就是插槽的机制

<el-table-column label="操作" width="100">
    <template>
      <el-button size="small" type="danger">删除</el-button>
    </template>
</el-table-column>

table组件-自定义列-作用域插槽

后端返回的数据中，如果只有一个指代性别的编码，为了方便用户查看，需要我们把1转换成男，0转换成女

作用域插槽拿到数据，再使用函数做转换输出即可

<el-table-column label="性别">
    <template slot-scope="scope">
      {{scope.row.companyLogo}}
    </template>
</el-table-column>

<script>
  export default {
      methods: {
        transGender(genderCode) {
          console.log(genderCode)
          const genderList = {
            1: '男',
            0: '女'
          }
          return genderList[genderCode]
        }
      }
  }
</script>

  1. 直接使用prop只能渲染文本，通过prop不能直接渲染的时，我们需要自定义内容渲染

  2. 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

  3. scope.row拿到当前行的完整对象数据

image-20210410114541939.png

pagination-翻页组件基础使用

<el-pagination 
  layout="prev, pager, next" 
  :total="1000">
</el-pagination>

  • layout中的关键字有自己的含义；

  • total用来设置数据的总条数(默认每页10条数据)

<template>
  <div>
    <h1>Pagination</h1>
    <el-pagination
      layout="prev, pager, next"
      :total="1000"
      @current-change="pageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    // 把当前点击的页数给传进来
    pageChange(page) {
      console.log(page)
    }
  }
}
</script>

点击页面进行翻页时就会触发current-change 事件

  1. 事件名不是驼峰命名法，而是采用kebab-case(昵称：烤串命名法)
  2. 它会自动接收页码
  3. 翻页按钮的结构 ：layout 按照我们传入的结构顺序依次渲染
  4. 分页逻辑：总页数 = 总条数（:total） / 每页的条数(:page-size)
  5. 事件： @current-change
  6. 翻页组件一般和表格一起使用，但是，它并不决定表格的数据来源。
avatar
文章
阅读
粉丝