小白速通网页布局神器 Element UI

ElementUI 官网

https://element.eleme.cn/#/zh-CN

Vue 安装 ElementUI

一个命令搞定

npm i element-ui -S

没搞定的检查下 npm 镜像，修改镜像源为淘宝

npm config set registry https://registry.npmmirror.com

查看 npm 镜像

npm config get

或者安装 nrm，管理 npm 镜像

npm install nrm -g

nrm 切换镜像为 taobao

nrm ls
nrm use taobao
nrm current

Vue 配置安装 ElementUI
在 main.js 里引入下面的内容

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

Vue.use(ElementUI, { size: 'small' });

el-row + el-col

按钮 Button

属性：type、plain、round、circle
circle 按钮使用 icon 设置图标
禁用状态
文字按钮（可改变颜色）
事件：click

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>

表单 Form

输入框
type
show-password
clearable
suffix-icon=“el-icon-date”

<el-input v-model="input" placeholder="请输入内容"></el-input>

强制要求你必须有v-model

输入建议表单

<el-autocomplete style="width: 300px" placeholder="请输入内容，我来帮你猜一猜" :fetch-suggestions="querySearch"
:trigger-on-focus="false" v-model="value3"></el-autocomplete>

coffees: [{ value: '1星巴克咖啡' },{ value: '1栖巢咖啡' }, {value: '2瑞幸咖啡'}, {value: '3库迪咖啡'}]
// 值必须带value

querySearch(query, cb) {  // callback
  let result =  query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees
  console.log(result)
  cb(result);
}

下拉框
clearable
multiple
filterable 可搜索

<el-select v-model="value" placeholder="请选择">
  <el-option value="糕"></el-option>
  <el-option value="高"></el-option>
  <el-option value="羔"></el-option>
</el-select>

<el-select v-model="value" placeholder="请选择">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

单选

<el-radio-group v-model="radio">
  <el-radio label="男"></el-radio>
  <el-radio label="女"></el-radio>
</el-radio-group>

多选

<el-checkbox-group v-model="checkList">
  <el-checkbox label="复选框 A"></el-checkbox>
  <el-checkbox label="复选框 B"></el-checkbox>
</el-checkbox-group>

日期时间
format
value-format

<el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
<el-date-picker v-model="datetime" type="date" placeholder="选择日期时间"></el-date-picker>

<el-date-picker v-model="daterange" type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
</el-date-picker>

初始格式：Wed Aug 09 2023 00:00:00 GMT+0800 (中国标准时间)

一定要设置 value-format
年月日：value-format="yyyy-MM-dd"
年月日时分秒：value-format="yyyy-MM-dd HH:mm:ss"

表格 el-table

<el-table :data="tableData" border :header-cell-style="{ background: 'aliceblue', fontSize: '16px' }">
  <el-table-column label="序号" prop="id" align="center"></el-table-column>
  <el-table-column label="名称" prop="name" align="center"></el-table-column>
  <el-table-column label="年龄" prop="age" align="center"></el-table-column>
  <el-table-column label="地址" prop="address" align="center"></el-table-column>
  <el-table-column label="操作">
    <template v-slot="scope">
      <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
    </template>
  </el-table-column>
</el-table>

tableData: [
        {  name: '糕', address: '江苏省常州市', id: 1, age: '20' },
        {  name: '糕', address: '江苏省常州市', id: 1, age: '20' },
        {  name: '糕', address: '江苏省常州市', id: 1, age: '20' },
        {  name: '糕', address: '江苏省常州市', id: 1, age: '20' },
        {  name: '糕', address: '江苏省常州市', id: 1, age: '20' },
        {  name: '糕', address: '江苏省常州市', id: 1, age: '20' },
        {  name: '糕', address: '江苏省常州市', id: 1, age: '20' },
      ],

提示信息

message
notify
confirm

// alert(row.name)
// this.$message.success(row.name)
// this.$message.warning(row.name)
// this.$notify.success(row.name)

this.$confirm('这是什么个玩意儿？', '提示', {
  type: 'warning'
}).then(res => {
  this.$message.success("ok 我点击了确认")
}).catch(() => {
  this.$message.warning("ok 我点击了取消")
})