VUE项目后台管理系统（五）右边主体中的面包屑展示和 table表格的展示，编辑删除按钮，标签上面的文字提示

面包屑的展示

从官网找到对应的代码

拿到这段代码

table 表格

卡片

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

一行里面不同标签的间隔

输入框里面的删除按钮

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

我们可以绑定这个事件

表格的展示

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

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

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

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

开关的展示

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

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

代码语言：javascript复制

//修改用户状态
			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();
					})
			},

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

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

代码语言：javascript复制

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

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

我们现在就可以这样使用

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

scope table 表格事件

0 人点赞

VUE项目后台管理系统（五）右边主体中的面包屑展示 和 table表格的展示，编辑删除按钮，标签上面的文字提示

目录