ヒント: 記事を書いた後、目次を自動生成することができます. 生成方法は右のヘルプドキュメントを参照してください.
記事ディレクトリ
序文
タイトルが少しわかりにくいかどうかを確認してください. ここでの要件は el-table の遅延ロードを使用することです. データをロードした後, 遅延ロードされたデータを変更する場合, グローバルリフレッシュは実行されませんが、現在の遅延ロードされたデータのみが実行されます.運用されます。比如一级是真实的数据，二级是懒加载的数据，当二级的某条数据进行了修改后，只让当前的二级菜单重新向后台请求数据，进行刷新得到最新的数据
1. el-table で遅延読み込みを有効にする
ツリー型データの表示に対応。行がchildren フィールド、ツリー データと見なされます。ツリー データをレンダリングする場合は、指定する必要がありますrow-key。子ノード データの非同期読み込みをサポートします。Tablelazyプロパティ、関数をロードしますload。row でhasChildrenフィールド子ノードを含む行を指定します。childrenどちらもhasChildrenからtree-props設定。
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
thisTabeDom: Object,
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: 31,
pid: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
pid: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
])
}, 1000)
}
},
}
</script>
第二に、変換を実行します
1. データにグローバル変数を追加する
コードは次のとおりです (例)。
export default {
data() {
return {
// 存储操作的DOM数据
thisTabeDom: Object,
tableData: [{
}]
}
}
}
2.対応する操作でthisTabeDom値を割り当てます
コードは次のとおりです (例)。
<el-button
icon="el-icon-edit"
type="primary"
size="mini"
@click="handleDialogForm(scope)">
编辑
</el-button>
<!-- 编辑/新增弹出框 -->
<dialog-formBox :visible.sync="dialogFormVisible" :menuInrForm="this.menuForm" @addCallback="tabeDomCallback"></dialog-formBox>
/**
* 新增、编辑
*/
handleDialogForm(box) {
// 将操作的scope保存在全局变量中
this.thisTabeDom = box
console.log(box);
if (box.row && box.row.id) {
this.menuForm = {
...box.row };
} else {
this.menuForm = {
};
}
// 显示el-dialog对话框进行数据修改操作
this.dialogFormVisible = true;
},
3.コールバックメソッドを書くtabeDomCallback
コードは次のとおりです (例)。
// 修改回调
tabeDomCallback(val) {
console.log(val);
console.log(this.thisTabeDom.row);
var states = this.thisTabeDom.store.states
var treeData = states.treeData
// 判断获取的ID是父ID还是当前ID
let id = val ? this.thisTabeDom.row.id : this.thisTabeDom.row.pid
let data = treeData[id]
let teb = 'loaded' in data
// 如果对象中没有loaded字段，则表示修改的数据不是懒加载的
if (!teb) {
// 调用列表刷新
this.getList()
console.log('回调结束,刷新列表');
return
}
// 将懒加载数据标志改为false
treeData[id].loaded = false
// 调用组件内部的方法加载数据 间接调用懒加载方法
this.thisTabeDom.store.loadOrToggle({
id})
console.log('回调结束,刷新DOM');
},
4. ダイアログ操作後のメソッドコールバック
コードは次のとおりです (例)。
/**
* 确认提交
*/
confirm() {
this.$refs.menuForm.validate(async (valid) => {
if (valid) {
//编辑
if (this.menuForm && this.menuForm.id) {
await organApi.update({
id: this.menuForm.id,
name: this.menuForm.name,
});
// 回调，false 表示通过父ID懒加载子节点
await this.$emit("addCallback", false);
this.$message.success("修改成功");
} else {
//新增
await organApi.add({
name: this.menuForm.label,
pid: this.menuForm.pid? this.menuForm.pid: 0,
});
// 回调，false 表示通过当前ID懒加载子节点
await this.$emit("addCallback", true);
this.$message.success("新增成功");
}
this.onClose();
}
});
},
要約する
希望之篇文章对大家有所帮助
メソッドの実装Debug el-table的懒加载