2月份是忙碌但是不加班的一个月，被要求修改各种各样的bug和需求，而且因为天气的原因不太想学习，脑子被冻住了一样难受，但是3月份天气转好，我要开始努力奋斗啦~

目录

• 一、头尾固定，中间自由滚动样式
• 二、监听store里的值变化
• 三、表头自定义树形选择实现
• 四、灵活表头的显示自定义
• 五、一些小tips

一、头尾固定，中间自由滚动样式

有个布局要求：
头部固定高度，宽度100%自适应父容器；
底部固定高度，宽度100%自适应父容器；
中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现滚动条

.Head {
    height:100px;
    width:100%;
    position:absolute;
    top:0;
}
.Body {
    width:100%;
    overflow:auto;
    top:100px;
    position:absolute;
    bottom:100px;
}

.Foot {
    height:100px;
    width:100%;
    position:absolute;
    bottom:0;
}

二、监听store里的值变化

有需求要在切换的时候，及时变化

 watch: {
    '$store.getters.存储名'() {
      //你需要执行的代码
    }
  },

三、表头自定义树形选择实现

表头自定义升级版，组件用到了弹窗+树形选择控件+输入搜索，联动灵活表头。
首先要把表格的所有字段列表都写出来，label、name、width:、sortable
其次要把树形默认要选中的内容用数组写出来，label和id的都准备好
然后树形数据按照需求排列好，标注不能取消的属性disabled: true
表头自定义选择控件：

  <!-- 表头自定义弹窗 -->
    <el-dialog
      title="表头自定义"
      :visible.sync="dialogVisible"
      :before-close="cancel"
      width="320px"
    >
      <div>
        <el-input placeholder="搜索字段" v-model="filterText">
        </el-input>
        <div class="tree-style">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            default-expand-all
            :default-checked-keys="checkedKey"
            :filter-node-method="filterNode"
            ref="tree"
          >
          </el-tree>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="comfirm">确 定</el-button>
      </span>
    </el-dialog>

1.搜索需求的实现，使用ref:

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    }
 //树形数据过滤方法
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

2.点击表头自定义按钮

 chooseTitle() {
 //弹窗显示
      this.dialogVisible = true
 //渲染报错，使用this.$nextTick
      this.$nextTick(() => {
      //把要默认选中的id数组放入
        this.$refs.tree.setCheckedKeys(this.checkedKey)
      })
    },

3.保存选中的数据

    comfirm() {
      //获取被选中的节点元素，可抽离出id和label
      let res = this.$refs.tree.getCheckedNodes()
      this.checkedKey = []
      this.checkedLabel = []
      res &&
        res.forEach(item => {
          this.checkedKey.push(item.id)
          this.checkedLabel.push(item.label)
        })
        //调用表头渲染
      this.getTableHeader()
      this.dialogVisible = false
    },

四、灵活表头的显示自定义

这里的scope.row[item.name]代表表格的值，可以根据item.属性去设置一些特殊的属性显示
scope.$index可以拿到当前列的索引值，item.name拿到当前列的表头

 <el-table-column
                  :label="item.label"
                  :property="item.name"
                  :width="item.width"
                  min-width="180"
                  v-for="(item, index) in tableHeader"
                  :key="index"
                  :fixed="item.fixed"
                  :sortable="item.sortable"
                >
                  <template slot-scope="scope">
                    <template v-if="  ">
                
                    </template>
                    <span v-else>{{ scope.row[item.name] }}</span>
                  </template>
                </el-table-column>

五、一些小tips

1.视图没更新就调用的时候，使用

this.$nextTick()=>{
//写调用的方法
}

2.Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因为两个模版使用了相同的元素， 不会被替换掉。需要添加一个key属性不让其复用。