案例
其他的组件我们通过完成一个页面来学习。
我们要完成如下页面效果
要完成该页面，我们需要先对这个页面进行分析，看页面由哪儿几部分组成，然后到官网进行拷贝并修改。页面总共有如下组成部分
还有一个是当我们点击 新增 按钮，会在页面正中间弹出一个对话框，如下
准备基本页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
new Vue({
el: "#app"
})
</script>
</body>
</html>完成表格展示
使用 Element 整体的思路就是 ==拷贝 + 修改==。
在左菜单栏找到 Table 表格并点击，右边主体就会定位到表格这一块，找到我们需要的表格效果（如上图），点击 显示代码 就可以看到这个表格的代码了。
将html标签拷贝到 <div id="app"></div> 中，如下：
修改
-
修改表头和数据
下面是对表格代码进行分析的图解。根据下图说明修改自己的列数和列名
从之前的表格拷贝一列出来并对其进行修改。按钮是从官网的 Button 按钮 组件中拷贝并修改的
扫一扫
828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
