ElementUI笔记

最新推荐文章于 2024-09-11 15:05:16 发布

Camellia﹍

最新推荐文章于 2024-09-11 15:05:16 发布

阅读量925

点赞数 14

文章标签： elementui 笔记前端

本文链接：https://blog.csdn.net/weixin_74197804/article/details/138230255

版权

本文介绍了如何通过npm安装ElementUI并配置到Vue项目中，详细讲解了ElementUI中的各种组件如按钮、表单、日期时间选择器以及表格的使用方法，包括属性设置和事件处理。

摘要由CSDN通过智能技术生成

ElementUI官网

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

Vue安装ElementUI

npm i element-ui -S

修改镜像源为淘宝

npm set registry https://registry.npm.taobao.org/

Vue 配置安装ElementUI

在main.js里引入下面内容

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

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

按钮Button

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

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

表单From

输入框
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="querySerrch" :trigger-on-focus="false" v-model-"value3"></el-autocomplete>

coffees:[{ value:'1星巴克咖啡’},{value:'1栖巢咖啡’}，{value:'2瑞幸咖啡'}，{value://值必须带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 可搜索

日期时间

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-foImat="yyyy-MM-dd"
年月日时分秒: value-format=“yyyy-MM-dd HH:mm:ss”

表格el-table

<el-row style="margin:100px">
<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>
</el-row>

表格数据

tableData:[
        {name:'青哥哥哥’，address:"安徽省合肥市'，id:1，age:'30'},

        {name:'青哥哥哥’，address:"安徽省合肥市'，id:1，age:'30'},

        {name:'青哥哥哥’，address:"安徽省合肥市'，id:1，age:'30'},

],