- 对象有子集可以使用嵌套表格来显示
- 多选框 数组 push数据需要加入
实际修改的数组只需要id,需要使用两个变量进行存储 才能进行更新操作
要保持 和 下拉筛选的options 里的value 值 的数据类型一致 string类型 或者 int类型 - element ui 表格展开 无子集不显示箭头
- element 表格的单元格合并
- //表格强制更新数据 this.index, this.dataList[row.$index]) 使用场景 表格编辑单元格数据
- 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
}