element ui 踩坑笔记

1. 对象有子集可以使用嵌套表格来显示
2. 多选框 数组 push数据需要加入
   实际修改的数组只需要id，需要使用两个变量进行存储 才能进行更新操作
   要保持 和 下拉筛选的options 里的value 值 的数据类型一致 string类型 或者 int类型
3. element ui 表格展开 无子集不显示箭头
4. element 表格的单元格合并
5. //表格强制更新数据 this.$set(this.dataList,row.$index, this.dataList[row.$index]) 使用场景 表格编辑单元格数据
6. elementUI中的cascader级联选择器组件清除选中值
   
   PS： 点击取消按钮的事件 用来 调用KEY值 的更新，并且需要清空options 和value

handleCancle(){
      debugger
      this.refresh++ //key
      this.cascaderOptions = [] //option
      this.dataForm.payList = [] //value
      this.visible = false

    }

7 el-input 键盘事件 触发 失去焦点事件

 @blur="handlebelongMoney(scope.row)" @keyup.enter.native="$event.target.blur"

8 表格列 线对不齐 等到渲染完成红重新刷新布局即可

 mounted(){
      // setTimeout(()=> {
      //     this.$refs.table.doLayout()
      // },1200)
      this.$nextTick(()=>{
        this.$refs.table.doLayout()
      })
  },

9 tree组件 默认选择

node-key="id"//唯一标识
 this.handleNodeClick(this.fileData[0])
         this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.fileData[0].id)
        })

10 el-table 实现表格行内编辑
表格行内编辑

11 Cascader 选项文字内容过长，鼠标悬停显示点击

.el-cascader-menu{ width:  200px !important; }/

12 表格 默认选中某一行
场景 表格单元格修改数据强制更新后 定位到 修改的当前行

<el-table  ref="payTable"  highlight-current-row >//高亮显示
<el-input class="belongMoneyClass" v-show="scope.row.showOrNot" v-model="scope.row.belongMoney" @blur="handlebelongMoney(scope.row,scope.$index)" @keyup.enter.native="$event.target.blur"  size="small"  placeholder="请输入归属金额" clearable ></el-input>
data() {
    return {
      dataList: [], //表格数据
      index:0 //行数
    };
  },}
  //函数监听数据变化
    watch: {
    dataList: function() {
      this.$nextTick(function() {
        this.$refs.payTable.setCurrentRow(this.dataList[this.index])
      })
    }
  },

13 el-table 表格线颜色修改

.el-table tr,.el-table th,.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
  border-color:#dcdfe6; 
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color:#dcdfe6;
}

14 判断移动端或PC端登录，状态保存至vuex中
main.js文件

if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
  // 移动端逻辑
  store.dispatch('isMobileDevice', true)
}else{
  store.dispatch('isMobileDevice', false)
}

store /modules /common.js

 state: {isMobile: false,},
  mutations: {
    IS_MOBILE: (state, isMobile) => {
      state.isMobile = isMobile
    },
   },
     actions: {
    isMobileDevice({ commit }, isMobile) {
      commit('IS_MOBILE', isMobile)
    }
  },

getters.js文件

const getters = {
  isMobile: state => state.common.isMobile,
  }

调用

     isMobile() {
      return this.$store.state.common.isMobile
    }

15 使用Element时 默认勾选表格toggleRowSelection不生效
给表格数据设置rowkey 和ref

 <el-table  ref="multipleTable"  >
 <el-table-column  type="selection" width="55" :key="sid2">
    </el-table-column>

监听数据变化 遍历绑定勾选

 watch: {
    statusResult: function(val1,val2) {
      debugger
      this.$nextTick(function() {
          if (val1) {
            val1.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row,true);
            })
            this.multipleSelection = this.statusResult
          }    
      })
  }

15 Echarts图形曲线Y轴名称居中，且设置距离Y轴位置

  nameLocation:'center',
            nameGap:40

16 el-select 组件value值绑定对象时，需使用value-key指定唯一标识，才能保证回显

如果使用其他对象存值会出现样式显示全选问题

正确代码

     <el-form-item
          label="监测项目"
          prop="itemCode"
          :rules="[
            { required: true, message: '请选择监测项目'},
          ]"
        >
          <el-select v-model="form.itemCode" value-key="monitorItem" placeholder="请选择监测项目" style="width: 100%;" @change="getAutoDevMonitor">
            <el-option
              v-for="item in itemList"
              :key="item.monitorItem"
              :label="item.itemName"
              :value="item"
            />
          </el-select>
        </el-form-item>

17 element-ui分页组件在返回时总是显示第一页的问题的解决方案
原因：pageTotal为0时 current-page会一直显示为1
我们返回当前页面取得总条数pageTotal的之前，element-ui的分页组件已经在页面加载完毕，当时的pageTotal绑定的是data里面初始化的数据0，所以当总条数为0的时候，分页组件的页码默认为1。并且当pageTotal在created生命周期里取得数据后，分页组件也不会刷新。所以这就导致，页面内容正确，但是页码高亮依旧是第一页
解决方案 ：定义组件key强制刷新，在重新赋值pageTotal刷新组件

  <el-pagination
        :key="pageKey"
        @current-change="handlePhotoCurrentChange"
        layout="prev, pager, next,jumper"
        :page-size="photoParam.pageSize"
        :current-page="photoParam.pageNo"
        :total="photoTotal">
      </el-pagination> 
      </div>
pageKey:1,
 this.photoTotal = res.result.total
              this.pageKey++

18 动态表格渲染包括表头

   <el-table
            border
            :data="forms"
            stripe
            style="width: 100%"
            max-height="530"
          >
            <el-table-column
              v-for="i in headers"
              :key="i.fieldSort"
              :prop="i.fieldName"
              :label="i.fieldNameCn"
            >
              <template slot-scope="scope">
                <span> {{ scope.row[i.fieldName] }}</span>
              </template>
            </el-table-column>
          </el-table>

19深拷贝

 */
export function deepClone(source) {
    if (!source && typeof source !== 'object') {
        throw new Error('error arguments', 'deepClone')
    }
    const targetObj = source.constructor === Array ? [] : {}
    Object.keys(source).forEach(keys => {
        if (source[keys] && typeof source[keys] === 'object') {
            targetObj[keys] = deepClone(source[keys])
        } else {
            targetObj[keys] = source[keys]
        }
    })
    return targetObj
}