ElementUI相关内容

最新推荐文章于 2024-03-23 19:05:49 发布

vvv10

最新推荐文章于 2024-03-23 19:05:49 发布

阅读量342

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_36585489/article/details/108137162

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

ElementUI相关内容

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值

错误截图（图片转自）：
图片转自：https://www.cnblogs.com/lyt0207/p/12872139.html
解决方法：出现这种情况可能是从后台返回的数据类型和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

vvv10

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ElementUI相关内容

文章目录ElementUI相关内容一、ElementUI入门二、ElementUI调用接口ElementUI相关内容一、ElementUI入门elementUI官方中文文档：https://element.eleme.cn/#/zh-CN/component/button二、ElementUI调用接口转载：https://blog.csdn.net/qq_40236722/article/details/88175015...
复制链接

扫一扫