需求
项目中要在a.vue界面点击表格中数据，携带参数跳转到b.vue界面，并进行查询。需要在d2-crud-plus框架下实现。
解决方法
使用插槽将要点击的数据添加上点击事件，在点击事件中添加路由跳转，并携带参数。
在目标界面使用对外暴露的方法：doLoad() 方法进行查询。
/*** 第一次请求页面数据* initColumns初始化完成后调用* 可以用一个空方法覆盖它，阻止初始化后请求数据*/doLoad () {return this.doRefresh({ from: 'load' })},
d2-crud-plus中代码
crud.js
export const crudOptions = (vm) => {return {...columns: [...{title: 'ID',key: 'keyId',search: {disabled: false},rowSlot: true,type: 'input',...},...]...}
}
index.vue
<template><d2-container :class="{ 'page-compact': crud.pageOptions.compact }"><d2-crud-x ref="d2Crud" v-bind="_crudProps" v-on="_crudListeners"><div slot="header"><crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" /></div><template slot="keyIdSlot" slot-scope="scope"><!-- 点击跳转--><div @click="clickId(scope.row.keyId)">{{ scope.row.keyId }}</div></template></d2-crud-x></d2-container>
</template>
// 点击imei跳转clickIMEI(val) {this.$router.push({ name: 'pageName', query: { id: val} })}
<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
export default {mixins: [d2CrudPlus.crud],data() {...},methods: {...// 点击id跳转clickId(keyId) {this.$router.push({ name: 'list', query: { id: keyId} })}...}
}
</script>
list.vue
<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
export default {name: 'list',mixins: [d2CrudPlus.crud],data() {return {}},methods: {...doLoad() {if (this.$route.query.id) {this.getSearch().form.id= this.$route.query.id}this.getSearch().doSearch()},...}
}
</script>
