目录

面包屑的展示

从官网找到对应的代码


拿到这段代码

table 表格

卡片


如果一行里面有不同的标签，那么这些标签如果有间隔的话，可以使用这些

一行里面不同标签的间隔



输入框里面的删除按钮


在输入框里面只要加了那一个属性就可以了。这个的原理是，只要点击了那个X,那么就会触发事件，我们可以在官网里面找到


我们可以绑定这个事件


表格的展示

从官网找到对应的表格，复制过来



这个属性是动态的绑定下面的变量

只要将变量里面的属性和表格里面的属性一一对应，那么就可以展示了。


如果要在表格里面添加其他的标签，那么就需要写在template 这个标签里面 。slot-scope这个属性的意义是当前行。这个值scope就是当前行的意思

开关的展示


我们在我们的代码里面，放这个代码，那么只要我们点击这个开关，就触发一个事件，事件里面写我们要写的东西就可以了。



点击这个开关进行触发这个事件

//修改用户状态
			editStatus(id, status) {
   
				this.$http.put(`users/${
   id}/state/${
   status}`)
					.then(res => {
   
						//console.log(res);
						if (res.data.meta.status !== 200) return this.$message.error('设置状态失败！');
						this.$message.success('更新状态成功！');
						//更新列表
						this.getUserList();
					})
			},

这个方法里面将这条数据的信息传到后端，更新这条数据的 状态就可以了。

鼠标放到标签上面的文字提示

  <el-tooltip class="item" effect="dark" content="Top Center 提示文字" 
  placement="top">
  
      <el-button>上边</el-button>
      
    </el-tooltip>

里面是放各种各样的标签，外面放的是这个提示框的标签，提示框里面的字还是content属性里面的值

我们现在就可以这样使用


以上是将我们的按钮包裹住，只要鼠标放到这个按钮上面，就会有提示框