文章目录
ElementUI相关内容
一、ElementUI入门
elementUI官方中文文档：https://element.eleme.cn/#/zh-CN/component/button
二、使用@vue/cli3.0快速搭建elementui
在搭建好全局@vue/cli3.2的基础上，创建一个项目并添加elementui插件。
vue create my-app
cd my-app
vue add element
参考链接：https://github.com/ElementUI/vue-cli-plugin-element
三、ElementUI调用接口
转载：https://blog.csdn.net/qq_40236722/article/details/88175015
四、分页
<el-row>
<el-col :span="24">
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage" //当前页数
:page-sizes="[10, 20, 50, 100]" //可选择的每页显示的条数[10页、20页、50页、100页]
:page-size="limit" //当前限制的每页所显示的条数，可pagesize数组进行选择
layout="total, sizes, prev, pager, next, jumper"
:total="count"> //记录数据的总条数，通过调用接口获取所有的记录条数
</el-pagination>
</div>
</el-col>
</el-row>
<script>
name:"goods_index",
data(){
return{
limit:10,
currentPage:1,
count:0, //暂时给定的值，表明是int类型，后面会通过在methods中调用接口获取数据中所有记录的总条数
},
}
// 分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.limit = val //每页的条数限制
this.Lists(); //嗲用axios接口
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val //当前页
this.Lists(); //嗲用axios接口
},
</script>
效果示例：
elememtui文档连接：https://element.eleme.cn/#/zh-CN/component/pagination#pagination-fen-ye
五、Message
5.1、Message提示消息
参考文档：https://element.eleme.cn/#/zh-CN/component/message#fang-fa
5.2、Message-box弹框（$ confirm、$ msgbox等，具体应用例如删除等弹框）
参考文档：官方文档
1、$ msgbox
<el-button
type="danger"
icon="el-icon-delete"
@click="delDio(scope.row)" //将行数据传到delDio函数中
size="medium">
删除
</el-button>
<script>
....
delDio(row) {
let _this = this;
const h = this.$createElement;
this.$msgbox({
title: "提示",
message: h("p", null, [
h("span", null, "是否确认 "),
h("span", { style: "color: #F45A38"}, "删除"),
h("span", null, "该商品？ ")
]),
type: "warning",
showCancelButton: true,
confirmButtonText: "确定",
cancelButtonText: "取消",
customClass: "message_box",
cancelButtonClass: "message_box_cancle",
confirmButtonClass: "message_box_confirm",
beforeClose: (action, instance, done) => {
if (action === "confirm") {
instance.confirmButtonLoading = true;
instance.confirmButtonText = "删除中...";
_this.$api .Delete('/index/index' + "/" + row.id, {})
.then(res => {
if (res.code == 0) {
instance.confirmButtonLoading = false;
done();
this.Lists(); //再次调用接口，进行Lists刷新
}
})
.catch(err => {
instance.confirmButtonLoading = false;
_this.$message.error(err.msg);
done();
});
} else {
done();
}
}
})
.then(action => {
console.log("======");
this.$message({
type: "success",
message: "删除成功!"
});
})
.catch(action => {
this.$message({
type: "info",
message: "已取消删除"
});
});
}
}
</script>
效果：
2、$confirm
<el-button
type="danger"
icon="el-icon-delete"
@click="delDio(scope.row)" //将行数据传到delDio函数中
size="medium">
删除
</el-button>
<script>
......
delDio(row){
let _this = this;
this.$confirm('是否删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
_this.$api.post(_this.$apiUrl.maintain + '/'+ row.id,{
status:row.status, //调用post接口需要传进去的data参数
}).then(res =>{
_this.goodsLists()
this.$message({
type: 'success',
message: '删除成功！',
});
})
}).catch(() => {
this.$message({
type: 'info',
message: '取消删除'
});
});
}
</script>
效果图：
六、ElementUI下拉框（v-for、key、value）
6.1基本用法
1、elementui的几个关键点
（1）v-mode：双向绑定数据，当前下拉框选中的值
（2）v-for：通过遍历循环options，获取下拉框的值，：key为唯一值，表示下拉框通过那一个值进行遍历
（3）：lable的值为显示在下拉框中的值，：lable是每个数据的唯一标识，也是v-model所绑定值
（4）在el-option中，设定disabled值为 true，即可禁用该选项（该选项显示为灰色，禁止选中）
<el-option v-for="item in Lists" :key="item.id" :label="item.name" :value="item.id" :disabled="item.disabled">
v-model对应当前选中的 :value 的值
2、elementui举例说明
<div class="row_center">
<span style="width: 120px;">角色权限：</span>
<el-select v-model="country" clearable placeholder="请选择">
<el-option
v-for="item in Lists" //循环遍历Lists数组
:key="item.id" //数组的id进行遍历
:label="item.name" //下拉框显示的是对象数组中name字段的值
:value="item.id"> //唯一标识，与v-model的绑定值相对应
</el-option>
</el-select>
</div>
<script>
export default{
name:'admin_list',
data(){
return{
Lists:[
{id:1,name:'中国'}，
{id:2,name:'美国'}，
{id:3,name:'英国'}
],
country:''
}
},
}
</script>
6.2 解决报错：从后台返回的数据在让elementui的select显示对应的lable值而不是value值
错误截图（图片转自）：
解决方法：出现这种情况可能是从后台返回的数据类型和value的数据类型不一致，可以通过强制性转换成一致的
七、Dialog 对话框（弹框，有visible属性）
Diolog弹框通过visible属性来控制是否显示
<el-dialog
:modal-append-to-body='false'
:title="title" //动态设置弹框的头部标题
width="48%"
custom-class="dialog_bar"
:visible.sync="isShow" //通过变量isShow来决定弹框是否显示
:before-close="handleClose"> //在关闭痰喘之前的操作
<div class="dialog_info">
<div class="row_center" style="margin-bottom: 20px;">
<span style="width: 120px;">账户：</span>
<el-input v-model="account" placeholder="请输入账户" ></el-input>
</div>
<div class="row_center" style="margin-bottom: 20px;">
<span style="width: 120px;">密码：</span>
<el-input v-model="password" placeholder="请输入登录密码" ></el-input>
</div>
<el-button type="success" icon="el-icon-plus" @click="showDiolog">弹框</el-button>
</div>
</el-dialog>
<script>
export default{
dataa(){
isShow:false //isShow最开将值设为false，则弹框受visible属性的控制会进行影藏
account：'',
password:''
}
methods:{
handleClose(done) { //在点击dialog关闭之前会执行handClose这个事件
this.$confirm('确认关闭？') //点击关闭后弹出“确认关闭”的弹框
.then(_ => {
done();
})
.catch(_ => {});
},
}
showDiolog(){ //点击showDiolog时间将，isShow的值会被赋值为true，此时弹框显示
let _this = this
_this.isShow = false
}
</script>
补充：Dialog的visible属性需要添加 .sync 才有效
八、解决 “element el-tree在给default-checked-keys设置时会把节点下的所有子节点都选中” 的问题
default-checked-keys 表示默认勾选的节点的 key 的数组
给default-checked-keys给定一个数组时，会把数组中所含父子节点的所有子节点选上
解决方法：
在< el-tree>中添加check-strictly属性
<el-tree
:data="treeData"
node-key="id"
ref="tree"
lazy
show-checkbox
:load="loadNode"
check-strictly /
:props="defaultProps"
:default-checked-keys="dataId"
@check-change="handleCheckChange"
>
九、时间选择器 < el-time-picker >
参考文档https://element.eleme.cn/#/zh-CN/component/time-picker#methods
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
