参考资料

1. python web ui组件库
2. web原生ui组件库
3. docx和doc的转换
4. xlsx和excel一样吗
5. web component ui组件库
6. docx和doc的区别
7. docx是word文件吗
8. xls表格怎么制作表格

Element UI 组件库说明

简介

Element UI 是一套基于 Vue.js 2.0 的桌面端组件库，由饿了么前端团队开发。

安装

npm 安装

npm install element-ui -S

CDN 引入

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

快速开始

完整引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

按需引入

import { Button, Select } from 'element-ui'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

常用组件示例

按钮 (Button)

<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>

表单 (Form)

<el-form :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
  </el-form-item>
</el-form>

表格 (Table)

<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>

对话框 (Dialog)

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

消息提示 (Message)

this.$message('这是一条消息提示')
this.$message.success('这是一条成功消息')
this.$message.warning('这是一条警告消息')
this.$message.error('这是一条错误消息')

主题定制

可以通过修改变量或使用在线主题生成工具定制主题颜色。

注意事项

1. Element UI 仅支持 Vue 2.x 版本

2. 按需引入需要配合 babel-plugin-component 插件

3. 国际化支持通过设置 Vue.prototype.$ELEMENT 实现

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。