应用antd体系开发，这里是index.vue
<template> <div> <a-row :gutter="24"> <a-col :md="5" :sm="24"> <a-card :bordered="false" :loading="treeLoading"> <div v-if="this.categoryTree != ''"> <a-tree style="scroll:true" :treeData="categoryTree" v-if="categoryTree.length" @select="handleClick" :defaultExpandAll="true" :defaultExpandedKeys="defaultExpandedKeys" :replaceFields="replaceFields" /> </div> <div v-else> <a-empty :image="simpleImage" /> </div> </a-card> </a-col> <a-col :md="19" :sm="24"> <a-card :bordered="false" :bodyStyle="tstyle"> <div class="table-page-search-wrapper" v-if="hasPerm('category:page')"> <a-form layout="inline"> <a-row :gutter="48"> <a-col :md="6" :sm="24"> <a-form-item label="门类名"> <a-input v-model="queryParam.categoryName" allow-clear placeholder="请输出门类名" /> </a-form-item> </a-col> <a-col :md="6" :sm="24"> <a-form-item label="门类编码"> <a-input v-model="queryParam.code" allow-clear placeholder="请输出惟一编码" /> </a-form-item> </a-col> <a-col :md="6" :sm="24"> <a-form-item label="门类类型"> <a-select style="width: 100%" v-model="queryParam.categoryType" placeholder="请抉择门类类型"> <a-select-option v-for="(item, index) in categoryTypeData" :key="index" :value="item.code">{{ item.name }}</a-select-option> </a-select> </a-form-item> </a-col> <a-col :md="6" :sm="24"> <span class="table-page-search-submitButtons"> <a-button type="primary" @click="$refs.table.refresh(true)">查问</a-button> <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button> </span> </a-col> </a-row> </a-form> </div> </a-card> <a-card :bordered="false"> <s-table ref="table" :columns="columns" :data="loadData" :alert="options.alert" :rowKey="record => record.id" :rowSelection="options.rowSelection"> <template class="table-operator" slot="operator" v-if="hasPerm('category:add')"> <a-button type="primary" v-if="hasPerm('category:add')" icon="plus" @click="$refs.addForm.add()">新增门类 </a-button> <a-button type="danger" :disabled="selectedRowKeys.length < 1" v-if="hasPerm('category:delete')" @click="batchDelete"> <a-icon type="delete" />批量删除 </a-button> <x-down v-if="hasPerm('category:export')" ref="batchExport" @batchExport="batchExport" /> </template> <span slot="categoryTypeScopedSlots" slot-scope="text"> {{ 'category_type' | dictType(text) }} </span> <span slot="action" slot-scope="text, record"> <a v-if="hasPerm('category:edit')" @click="$refs.editForm.edit(record)">编辑</a> <a-divider type="vertical" v-if="hasPerm('category:edit') & hasPerm('category:delete')" /> <a-popconfirm v-if="hasPerm('category:delete')" placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)"> <a>删除</a> </a-popconfirm> </span> </s-table> <add-form ref="addForm" :id="this.queryParam.pid" @ok="handleOk" /> <edit-form ref="editForm" @ok="handleOk" /> </a-card> </a-col> </a-row> </div></template><script>import { STable, XCard, XDown } from '@/components'import { Empty } from 'ant-design-vue'import { getCategoryTree, categoryPage, categoryDelete, categoryExport} from '@/api/modular/main/category/categoryManage'import addForm from './addForm.vue'import editForm from './editForm.vue'export default { components: { STable, addForm, editForm, XDown, XCard }, data() { return { // 查问参数 queryParam: {}, // 表头 columns: [ { title: '门类名', align: 'center', dataIndex: 'categoryName' }, { title: '惟一编码', align: 'center', dataIndex: 'code' }, { title: '门类类型', align: 'center', dataIndex: 'categoryType', scopedSlots: { customRender: 'categoryTypeScopedSlots' } }, { title: '排序号', align: 'center', dataIndex: 'sort' }, { title: '备注', align: 'center', dataIndex: 'remaks' } ], tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' }, // 加载数据办法 必须为 Promise 对象 loadData: parameter => { return categoryPage(Object.assign(parameter, this.queryParam)).then(res => { return res.data }) }, List: [], categoryTree: [], defaultExpandedKeys: [], categoryTypeData: [], selectedRowKeys: [], selectedRows: [], treeLoading: true, simpleImage: Empty.PRESENTED_IMAGE_SIMPLE, replaceFields: { key: 'id' }, options: { alert: { show: true, clear: () => { this.selectedRowKeys = [] } }, rowSelection: { selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange } } } }, created() { this.getCategoryTree() if (this.hasPerm('category:edit') || this.hasPerm('category:delete')) { this.columns.push({ title: '操作', width: '150px', dataIndex: 'action', scopedSlots: { customRender: 'action' } }) } const categoryTypeOption = this.$options this.categoryTypeData = categoryTypeOption.filters['dictData']('category_type') }, methods: { // 获取树 getCategoryTree() { getCategoryTree(Object.assign(this.queryParam)).then(res => { this.treeLoading = false if (!res.success) { return } this.categoryTree = res.data if (this.categoryTree.length > 0) { this.queryParam.parentId = this.categoryTree[0].id } else { this.queryParam.parentId = 0 } // 全副开展，下面api办法提供的不失效，先用此办法 for (var item of res.data) { // eslint-disable-next-line eqeqeq if (item.parentId == 0) { this.defaultExpandedKeys.push(item.id) } } this.$refs.table.refresh() }) }, /** * 单个删除 */ singleDelete(record) { const param = [{ id: record.id }] this.categoryDelete(param) }, /** * 批量删除 */ batchDelete() { const paramIds = this.selectedRowKeys.map(d => { return { id: d } }) this.categoryDelete(paramIds) }, categoryDelete(record) { categoryDelete(record).then(res => { if (res.success) { this.$message.success('删除胜利') this.$refs.table.clearRefreshSelected() this.getCategoryTree() } else { this.$message.error('删除失败') // + res.message } }) }, /** * 批量导出 */ batchExport() { const paramIds = this.selectedRowKeys.map(d => { return { id: d } }) categoryExport(paramIds).then(res => { this.$refs.batchExport.downloadfile(res) }) }, handleClick(e) { this.queryParam = { pid: e.toString() } this.$refs.table.refresh(true) }, handleOk() { this.getCategoryTree() this.$refs.table.refresh() }, onSelectChange(selectedRowKeys, selectedRows) { this.selectedRowKeys = selectedRowKeys this.selectedRows = selectedRows } }}应用
tree组件，应用handleclick（）响应树节点点击，传递参数pid（树节点的id）
父组件向子组件传值：在父组件定义一个参数，而后把他绑定到要回填的组件上，在这里应用的是:id="this.queryParam.pid"
在子组件应用props，在data中定义props：[绑定的key]，这样就收到了，而后应用setFieldsValue回填到子组件表单中须要的地位。
setFieldsValue
在ant 中通过setFieldsValue 存储的相似是一种键值 对的模式，你能够通过对应的key 值来展现例如：
this.form.setFieldsValue( { pid: this.id } )个别这种状况会报错，说这个this.form.setFieldsValue不是一个methods，所以能够应用一个定时器
setTimeout()=>{this.form.setFieldsValue({pid : this.id}),100}除此之外，还利用了下拉树，在这里能够应用一个树的空间，叫做<tree-select>
这一简略模块的前端大略就是这个样子。
谢谢