el-table树形懒加载手动更新数据
// template:
<el-table
:data="tableData"
row-key="baseAaw01" // 行数据的 key,用来优化 Table 的渲染, 该值唯一
border
default-expand-all
lazy // 懒加载子节点数据
:load="loadData" // 加载子节点数据的函数,lazy 为 true 时生效
:tree-props="{ // 渲染嵌套数据的配置选项
children: 'childrenList', // childrenList 表示子节点列表数据字段
hasChildren: 'hasChildrenBool' // hasChildrenBool 表示是否存在子节点
}">
</el-table>
// script:
<script>
export default {
data(){
return {
refreshNode: {}, // 需要刷新的节点
parentId: null, // 父节点id
}
},
methods: {
/**
* 懒加载数据
* @param {*} tree 当前点击的树节点的数据
* @param {*} treeNode 节点的层级信息
* @param {*} resolve 渲染子节点列表数据的方法
*/
loadData(tree, treeNode, resolve) {
console.log("tree:", tree, "treeNode:", treeNode, "resolve:", resolve);
this.refreshNode[tree.baseAaw01] = {}; // tree.baseAaw01 表示当前节点的 id(被点击节点)
this.refreshNode[tree.baseAaw01].resolve = resolve; // 将当前节点渲染子节点列表数据的方法进行注册
const childrenNodeList = [...]; // 子节点列表数据
resolve(childrenNodeList);
},
/**
* 设置别名
*/
setAlias(row){
this.parentId = row.baseAaw02; // row.baseAaw02 表示父节点 id
},
/**
* 手动编辑所操作节点数据(设置别名)
*/
editNodeData(){
const resolveFunc = this.refreshNode[this.parentId]; // 获取当前节点的父节点渲染子节点列表数据的方法
const newChildrenNodeList = [...]; // 新的子节点列表数据
resolveFunc.resolve(newChildrenNodeList);
}
}
}
</script>
复制代码
拓展
ElementUI el-table树形表格懒加载如何手动刷新 el-table树状表格手动刷新的方法
elementUi table懒加载子节点修改数据后局部更新数据
element的DatePicker在vue的jsx里的使用
render(){
return (
<el-date-picker
type={dateTimeType || 'date'}
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value={nativeValue[key]}
onInput={(e) => (nativeValue[key] = e)} // on-change不行，onInput事件可以
></el-date-picker>
)
}
复制代码Vue中使用el-data-picker报错([Vue warn]: Avoid mutating a prop directly since the value will be overwritt：
锁定组件，发现是 el-date-picker 组件抛出的警告。通过在 github 上搜索，最终找到了答案 问题出在了这个 PR #21806 增加了 props placement 用来适应位置，但是之前的代码 created 时有给 placement 赋值。 this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left; 说白了之前 placement 是 data 的对象，现在变成 props 了，然后修改就报错了
想要解决这个问题，可以修改版本到 2.15.8 ：
npm uninstall element-ui
npm install element-ui@2.15.8 -s
复制代码注意：这里不要【^】,否则还会报错(可能node版本原因，有一些人的不会报错)
拓展
Vue中使用el-data-picker报错([Vue warn]: Avoid mutating a prop directly since the value will be overwritt：
Vue中使用el-data-picker报错([Vue warn]: Avoid mutating a prop directly since the value will be overwritt：
el-input 只能输入大于 0 的数字
<template>
<el-input v-model.trim="formCondition.count" @input="handleData" clearable></el-input>
</template>
<script>
export default {
data() {
return {
formCondition: {
count: null,
}
}
},
methods: {
handleData(val) {
let value = val.replace(/[^0-9]/g, ''); //只能输入正整数;
this.formCondition.stockRvu03 = value;
}
}
}
</script>
复制代码拓展
element el-input type=number的时候隐藏上下箭头，并且禁止鼠标滚动改变值，禁止输入e
input js 只能输入正整数
ElementUI el-cascader 获取选中的节点信息
<el-cascader
v-model=""
:options=""
ref="cascader"
@change="cascaderChange">
</el-cascader>
cascaderChange(val){
let getCheckedNodes = this.$refs.cascader.getCheckedNodes()[0];
}
复制代码