Yimi Element

yimi-element 是一个 Element UI 的增强组件库，目前包含组件：表格、模态框、操作、下载器、多选框组、开关面板、控制面板等。

注意：本组件库相应的Vue3版本，已经发布： yimi-element-plus

详细文档

学习项目

安装模块

npm install @uublue/yimi-element

使用模块

import Vue from 'vue'
// 引入Element UI
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 引入YimiElement
import YimiElement from '@uublue/yimi-element'
import '@uublue/yimi-element/lib/yimi-element.css'
Vue.use(YimiElement)

因为 yimi-element 是对 Element UI 的封装，所以必须引入 Element UI。

组件简介

表格组件 Table

高度集成的表格组件

特性

• 完全保留 ElTable 的功能
• 能从接口获取数据并渲染，也能直接通过 prop 传 data，格式为数组或{rows: any[], total: number, summary: any}
• 多种列渲染方式（formatter、render、插槽），插槽能控制列的标题或数据单元格
• 自动分页，支持前端分页和后端分页；自动计算合计行
• default(默认）插槽，保留 el-table 默认插槽的功能，可以插入 el-table-column
• search-bar(搜索栏）插槽，有表单自动验证的功能
• action-bar(操作栏）插槽，用于放置操作按钮
• tools(工具）插槽，用于放置简易的工具
• append 插槽，保留 el-table 的 append 插槽
• pagination(分页）插槽，可以替换默认的分页
• 可通过provide/inject注入（一般在 App.vue 全局注入），替换内置的默认逻辑：axios 对象，默认tools，mix-model、mix-paging、mix-sort、res-adapter
• 合理的缺省设计

简单用法

用法 1

代码

<!-- api属性传入接口配置项，columns属性传入表格列的配置 -->
<yi-table
  :api="{
        url: '/user',
        method: 'get',
    }"
  :columns="[
        {
            label: '姓名',
            prop: 'name',
        },
        {
            label: '年龄',
            prop: 'age',
            align: 'center',
        },
        {
            label: '性别',
            prop: 'gender',
            align: 'center',
        },
        {
            label: '分数',
            prop: 'score',
            align: 'center',
        }
    ]"
  :page-sizes="[5, 10]"
>
  <template #search-bar="{ model, refresh }">
    <!-- 发送请求时，表单可以被找到并验证 -->
    <!-- 表单的model直接绑定作用域插槽暴露的内置model -->
    <el-form :model="model" size="mini" inline label-position="left">
      <el-form-item label="姓名">
        <!-- 表单数据绑定在内置model上，修改表单数据会修改内置model，发送请求时就会带上表单数据 -->
        <el-input v-model="model.name"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 按钮的点击事件，直接调用作用域插槽暴露出来的refresh方法，触发表格再次请求数据并刷新 -->
        <el-button type="primary" @click="refresh">查询</el-button>
      </el-form-item>
    </el-form>
  </template>
</yi-table>

接口返回数据

{
	rows: [
	  {
          id: 1,
          name: "乔治",
          age: 17,
          gender: 1,
          score: 95
	  },
	  {
          id: 2,
          name: "海伦",
          age: 18,
          gender: 0,
          score: 98
	  },
	  {
          id: 3,
          name: "杰西卡",
          age: 19,
          gender: 0,
          score: 95
	  },
	  {
          id: 4,
          name: "约翰",
          age: 17,
          gender: 1,
          score: 90
	  },
	  {
          id: 5,
          name: "埃里克",
          age: 18,
          gender: 1,
          score: 55
	  }
	],
	summary: {score: 1200},
	total: 20
}

效果图

用法 2

代码

<!-- column的formatter可以对数据进行格式化 -->
<!-- column的render可以用函数方式渲染列 -->
<!-- 两个同时存在时，render函数中的value是经过formatter处理后的 -->
<yi-table
  :api="{
        url: '/user',
        method: 'get',
    }"
  :columns="[
        {
            label: '姓名',
            prop: 'name',
        },
        {
            label: '年龄',
            prop: 'age',
            align: 'center',
        },
        {
            label: '性别',
            prop: 'gender',
            align: 'center',
            formatter: (row, column, value) => {
                return value == 0 ? '女' : value == 1 ? '男' : '';
            },
        },
        {
            label: '分数',
            prop: 'score',
            align: 'center',
            render: (h, { value }) => {
                return h(
                    'el-tag',
                    {
                        props: {
                            type:
                            value < 60 ? 'danger' : value > 80 ? 'success' : 'info',
                        },
                    },
                    value
                );
            },
        },
    ]"
  :page-sizes="[5, 10]"
/>

接口返回数据

同用法 1

效果图

用法 3

代码

<yi-table
  :api="{
        url: '/user',
        method: 'get',
    }"
  :columns="[
        {
            label: '姓名',
            prop: 'name',
        },
        {
            label: '年龄',
            prop: 'age',
            align: 'center',
        },
        {
            label: '性别',
            prop: 'gender',
            align: 'center',
        },
        {
            label: '分数',
            prop: 'score',
            align: 'center',
        },
        {
            label: '操作',
            prop: 'opt',
        },
    ]"
  :page-sizes="[5, 10]"
>
  <!-- 动态插槽，插槽名以~~开头，后跟prop值，columns中对应列的标题渲染将使用该插槽 -->
  <template #~~name="{ column }">
    <el-link type="primary" size="mini">{{ column.label }}</el-link>
  </template>
  <!-- 动态插槽，插槽名以~开头，后跟prop值，columns中对应的列的渲染将使用该插槽 -->
  <template #~opt="{refresh}">
    <!-- 按钮的点击事件，调用动态列插槽作用域中暴露的refresh函数，触发表格刷新 -->
    <el-button type="text" @click="refresh">修改</el-button>
  </template>
</yi-table>

接口返回数据

同用法 1

效果图

用法 4

代码

<!-- 不从接口查询数据，而是直接使用data属性传入数据 -->
<yi-table
  :columns="[
        {
            label: '姓名',
            prop: 'name',
        },
        {
            label: '年龄',
            prop: 'age',
            align: 'center',
        },
        {
            label: '性别',
            prop: 'gender',
            align: 'center',
        },
        {
            label: '分数',
            prop: 'score',
            align: 'center',
        },
    ]"
  :data="[
        {
            id: 1,
            name: '乔治',
            age: 17,
            gender: 1,
            score: 95,
        },
        {
            id: 2,
            name: '海伦',
            age: 18,
            gender: 0,
            score: 98,
        },
        {
            id: 3,
            name: '杰西卡',
            age: 19,
            gender: 0,
            score: 95,
        },
        {
            id: 4,
            name: '约翰',
            age: 17,
            gender: 1,
            score: 90,
        },
        {
            id: 5,
            name: '埃里克',
            age: 18,
            gender: 1,
            score: 55,
        },
    ]"
/>

接口返回数据

同用法 1

效果图

动态展示

操作组件 Action

需要调用后端操作接口（增、删、改，查）时，一般是通过点击一个触发器（比如一个 button、link、tag或switch），弹出一个模态框，输入一些数据（或者无数据输入），然后构造请求数据并发送给接口，再根据请求的结果做相应的后处理，该组件就是对以上过程的封装。

特性

• 触发器(button、link、tag、switch)和模态窗（dialog 或 drawer）的功能完全保留
• 使用默认插槽时，点击触发器会先出现模态框，再在模态框中触发请求发送
• 不使用默认插槽时，点击触发器，如果配置了confirm-text会先弹框等待确认，再决定是否发送请求，否则直接发送请求
• 多点控制最终发送的请求数据：api 函数 （用于构造基础 api 配置项）、mix-model（从内置 model 数据合并）、mix-paging(从分页参数合并)、mix-sort（从排序参数合并），onSubmit 函数 （可以替换内置的提交处理）
• 内置 model 数据的存续可以配置：always、submit、never
• 发送请求前，会对默认插槽中找到的第一个 form 表单进行验证（无表单则不验证），验证不通过，会抛出事件
• 可通过provide/inject注入（一般在 App.vue 全局注入），替换内置的默认逻辑：axios 对象、默认mix-model（从内置 model 构造请求数据）
• 合理的缺省设计

用法

用法 1

代码

<yi-action
  text="新增用户"
  :api="{
        url: '/user',
        method: 'post',
    }"
>
  <template #default="{ model }">
    <el-row>
      <el-col>
        <!-- 此时，表单位于其他组件的插槽内，发送请求时，仍然可以被找到并验证 -->
        <!-- 表单的model直接绑定默认作用域插槽暴露的内置model，\
                表单数据也绑定在该model上，修改表单数据会修改内置model，发送请求时就会带上表单数据 -->
        <el-form :model="model" inline>
          <el-form-item prop="name" required label="姓名">
            <el-input v-model="model.name" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </template>
</yi-action>

效果图

用法 2

代码

<yi-action
  text="修改用户"
  type="warning"
  :api="{
    url: '/user',
    method: 'put',
  }"
  :on-open="({ model, context, resolve }) => {
      // 有on-open时，首先会开始加载(出现加载样式)，调用resolve方法会停止加载（加载样式消失）
      // 如果context中没有部门树的选项数据，则查询
        if (!context.deptOptions) {
          // request对象是http客户端
          request({
            url: '/department/tree',
          }).then((res) => {
            // resolve方法，第一个参数是要合并到内部model的数据，会影响到请求发送的数据，\
            // 第二个是要合并到内部context的数据，不会影响到请求发送的数据
            // 将查询到的部门树数据放入context，字段名是deptOptions
            resolve({}, { deptOptions: res.data.rows });
          });
        } else {
          resolve();
        }
    }
  "
>
  <!-- 默认插槽，是modal的窗体，默认的modal类型是dialog，还可以是drawer -->
  <template #default="{ model, context }">
    <el-form :model="model" inline>
      <el-form-item prop="name" required label="姓名">
        <el-input v-model="model.name" />
      </el-form-item>
      <el-form-item prop="deptId" label="部门">
        <!-- 使用context中提前准备好的部门选项数据 -->
        <el-cascader
          v-model="model.deptId"
          placeholder="请选择部门"
          :options="context.deptOptions"
        />
      </el-form-item>
    </el-form>
  </template>
</yi-action>

效果图

用法 3

代码

<yi-action
  text="删除"
  type="danger"
  :api="() => {
        return {
            url: `/user/${row.id}`, //上下文有row对象，比如处于表格数据单元格中
            method: 'delete',
        };
  }
  "
  confirm-text="是否删除？"
  @on-submit-success="(res, model) => {
      console.log('删除成功', res, model);
  }
  "
/>

效果图

动态展示

交流方式

QQ 群: 956379914

Email: [email protected]