易购后台管理系统商品管理界面制作
前言
易购项目致力于打造一个完整的电商系统，采用现阶段流行技术实现。
我们来写一下商品管理界面
商品管理界面
在Goods.vue中
我们再去element中去找一下input输入框相关的内容
data() {
return {
input: ''
}
}
后面还有俩按钮，通过button就可以
我们再调整一下布局，给大的div盒子一个goods的class
.goods {
margin: 10px;
}
.header{
display:flex;
button:{
margin-left:20px;
}
}
暂时先不给按钮添加点击事件，因为它和下面的内容有关，我们先把下面内容区域做完，然后再给按钮写点击事件
实现多选非常简单:
手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在
hover 时以 tooltip 的形式显示出来。
border
style="width: 100%"
>
@click="handleEdit(scope.$index, scope.row)">Edit
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete
最终的效果如下：
操作下面还有两个预留的按钮
methods: {
// 编辑操作
handleEdit(index, row) {
},
// 删除操作
handleDelete(index, row) {
}
}
我们放一行数据的效果如下图：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！