elementUi 中 table 在渲染时发生排版错乱

• 可以在 table 上使用 v-if ，在表格数据更新之后，让表格重新展示，达到重新渲染目的。缺点：页面会闪烁一下，用户体验不友好
• 根据官方说明，在表格数据更新之后，可以执行 doLayout方法（对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法）

this.$refs.multipleTable.doLayout();
// multipleTable 为表格绑定得 ref

• 可以为每个 el-table-column添加一个固定宽度

vue中 public与assets 区别

1. 相同点

   • 文件夹中的资源在html中使用都是可以的

2. 不同点

   • 使用assets下面的资源，在js中使用的话，路径要经过webpack中的file-loader编译，路径不能直接写。
   • 使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。
   • public中的文件，是不会经过编译的，打包后会生成dist文件夹，public中的文件只是复制一遍。因此，public建议放一些外部第三方，自己的文件放在assets，别人的放public中。
   • 若把图片放在assets和public中，html页面都可以使用，但是在动态绑定中，assets路径的图片会加载失败（因为webpack使用的是commenJS规范，必须使用require才可以。

//   HTML  结构

<div class="myDemo">
    //   直接显示文件内容
    <h5>直接路径</h5>

    <img src="../assets/logo.png" title="assets中的图片">
    <img src="/static/logo.png" title="static中的图片">

    //   动态显示文件内容
    <h5>动态路径</h5>

    <img :src="asetUrl" title="assets中的图片">
    <img :src="sticUrl" title="static中的图片">

</div>

//   JS  

export default {
    name: 'myDemo',
    data (){
      return {
        asetUrl: require('../assets/logo.png'),
        sticUrl: '/static/logo.png'
    }
}

或者使用 import

<img :src="checkLogin" alt="">

<script>
// import 引入方式 assets 文件夹
import aa from "../assets/切图2/pic1.png";
export default {
  name: "twologin",
  data() {
    return {
      loginBoxShow: true
    };
  },
  computed: {
    checkLogin() {
      if (this.loginBoxShow === true) {
        return aa;
      } else {
      // public 文件夹使用绝对路径
        return "/img/切图2/pic2.png";
      }
    }
  }
};
</script>

el-date-picker 时间区间选择器，在编辑的时候，页面不回显问题

属于 element-ui 中的一个bug

解决方案：

<el-date-picker
    :disabled="query.type === 'see'"
    v-model="item.times"
    type="daterange"
    value-format="yyyy-MM-dd"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @input="(e) => {
    return timeChange(e, index)
    }">
</el-date-picker>


timeChange (e, index) {
    this.$set(this.handleData.advancedResumeList[index],     'times', [e[0], e[1]]);
    this.$forceUpdate();
}

// 编辑的时候 不会触发 @change 事件，input事件可以触发，使用 $set
// this.$forceUpdate();强制刷新页面可以解决

安装nrm、cnpm、yarn等之后，提示不是内部命令，也不是可运行程序...

解决方案：

1. 找到对应的node版本，npm、npm.cmd 根目录下
2. 将 node_global/node_modules 下对应的包（yarn文件夹）放到node下的node_modules中
3. 将 node_global 下对应的包（yarn）yarn、yarn.cmd ...等放到 与npm、npm.cmd 同目录下

gitbook安装

需要老的node、npm版本，一下版本，亲测可用

• node 10.23.0
• npm 6.14.8

npm install -g gitbook-cli
gitbook --version
// 创建文件夹
g

vue项目在打包之后白屏问题

之前遇到vue打包后白屏，解决办法都是修改config文件，cli3没有该文件需要手动创建

白屏的问题，打包后的index.html中JS都是根目录的，所有打包后不放根目录找不到其他js文件。可以通过新建并配置config.js来完成

// 在vue.config.js中
module.exports = {
    publicPath:"./",
    outputDir:"distsss",
    assetsDir:"static",
}