element-admin采坑

因为一些原因，不得已换成了element，界面效果真心不如iview好看，没办法，哎,还是更喜欢iview的render函数写法，现在页面总感觉很乱

1.引入图标，（吐槽下，iview很全，但是element要自己扩展一些）

参考：https://www.jianshu.com/p/59dd28f0b9c9

//java-icon是你的前缀，这段代码一定要加，和iconfont保持一个样式即可
[class^="java-icon"],
[class*=" java-icon"]/*这里有空格*/
{
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

2.当动态修改了tree的勾选状态后，树形效果并没有刷新

需要手动处理

 <el-tree
            ref="tree"
            class="filter-tree"
            :data="data"
            show-checkbox
            default-expand-all
            node-key="id"
            :default-checked-keys="checkedPerm"
          >

this.checkedPerm.push(node.id);
this.$refs.tree.setCheckedKeys(this.checkedPerm); //数据更新并不会直接影响tree，需要手动触发

3.高度设置100%无效，不设置固定高度，没法让元素高度占满

使用vh单位计算，不要用100%

.box{padding: 15px;height: calc(100vh - 90px)}

4.打包

我还是一直以为是npm run build 打包，但是一直报错build not found，那我就头疼了，百度elementAdmin打包也没有一个所以然，后来就看官网，但官网居然也没有（可能我没看到），那就看github，原来在readme里有写啊

## 发布

```bash
# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

5.table高度

这个问题和iview是一样的，就是高度需要动态计算，监听窗口和数据的变化计算高度

<Table :height="tableHeight" border :columns="columns" :data="people_data" >
//当数据渲染完后，给tableHeight重新赋值,可以是固定的值，也可以是计算出来的值
this.tableHeight='378' //or window.innerHeight-257

//如果做了一屏响应式，要在mounted里要写上窗口的变化
window.onresize = function(){ // 定义窗口大小变更通知事件
     _this.tableHeight=window.innerHeight-257
   };

记住！一定要给动态属性附上默认值哦，不然会报错的，tableHeight:'100%'
！！！！注意：如果有两个同级组件同时使用了window.onresize事件，记得要把window.onresize写在父元素上，因为同时只会触发，只会执行一个！！！！

6.动态给tree的节点添加disabled并未生效

解决方案，是后台返给你数据的时候就得加上这个字段，否则动态添加无效

7.下拉框，单选，多选，如何让绑定的值是number

解决方案，动态赋值
以radio为例

<el-radio-group v-model="radio">
  <el-radio label="0">隐藏</el-radio>   //此时radio的值就是字符串‘0’
  <el-radio :label="1">显示</el-radio>  //此时radio的值就是number 1
</el-radio-group>

8.el-cascader选择器任意单选后，收起选择面板


 this.$refs.refHandle.dropDownVisible = false;

参考：https://blog.csdn.net/qq_36410795/article/details/100894520