ElementUI

Vue 按需添加 elmentUI

1. 使用 vue add element
   虽然官网有详细的按需引入的方式，但是在 vue-cli 中可以更方便的实现
   vue add element

》按需引入
》 ZH_CN
》main.js 引入 css 样式
》import 'element-ui/lib/theme-chalk/index.css'

---

样式重置

单vue文件中重置	全局重置
多写一个style不加scrop，可能会影响全局样式	待补充
使用css中 /deep/ 关键字

---

表格

单价	数量	小计
325	2	？

在ElementUI中，我需要获取row内的数据并进行计算，需要用到v-slot

<el-table-column label="小计">
    <template v-slot="scope">{{scope.row.price*scope.row.count}}</template>
</el-table-column>

如果直接给el-table-column绑定class不起作用，需要绑定class-name列样式

---

表单

当一个步骤图需要多个el-form时，验证规则可能失效，原因可能是diff算法没算出来或者怎样，通过给每一个el-form标签绑定一个key可以解决

分页器

elementUI的分页器由total(总数据量)和page-size(单页数据量)控制显示，分页器显示几个按钮由pager-count控制。
当前页码由current-page控制。
current-change页码改变触发事件

效果：点击第2页，刷新页面还是第二页。思路：存当前页码到本地存储，created时从session里取页码赋值给data内

<el-pagination
	:page-size="20"
	background
	layout="prev, pager, next"
	:total="total"
	@current-change="pageCurrentChange"
	注意这里的current-page需要number类型，但是从本地存储里获取的都是字符串
	:current-page="hotCenterObj.pagenum"
></el-pagination>

methods:{
	pageCurrentChange(num){
	  this.hotCenterObj.pagenum = num;
	  sessionStorage.setItem("pageNum", num);
	  this.getGoodsList();
	}

},
created(){
  this.hotCenterObj.pagenum = Number(sessionStorage.getItem("pageNum")) || 1
}

在项目开发过程中，需要将element-ui中的官方样式进行略微变动，但是在找到原来的代码进行更改之后发现样式并未生效，甚至代码都未进行自动编译，这就很奇怪了，从网上搜索发现原来是自己修改的源码是element-ui编译前的，如果自己需要进行样式修改的话，就需要重新编译一遍。具体做法是：

重新下载element源码；
改掉你想要改的效果，执行命令 npm run build;
将改掉里面的lib替换到node_modules中element下的lib包。