*本次作业放在shop文件夹中，命名为addGoods.vue*

• x-select组件：

<x-query-item :query="false" prop="type" label="所属分类：">
                <template v-slot="scope">
                    <x-select v-model="scope.row.type"
                        :data-source="{ head: { module: 'goods_category' }, data: { option: { id: 'typeId', label: 'typeName' } } }"
                        placeholder="请选择所属分类" />
                </template>
            </x-query-item>

v-solt：后面指定作用域
option：option是处理后台返回数据的，简单理解可以理解为id为前端与后端传递的主键数据，数据库存储就是存储id所指定的值，而label后面指定的则是根据id映射在组件下拉框所显示出来的值

• 字典的必要性

//在最顶上定义字典，可以定义多个（因为整体定义的是个数组）
<x-table-edit :data-source="{ head: { module: 'goods_demo' }, option: { export: false, privilege: true, keyField: true } }" :dic="[{
        head: { module: 'goods_category' },
        option: { dic: { name: 'category_dic' } }, data: { option: { id: 'typeId', label: 'typeName' } }
    }]">

//在需要的地方使用
<x-table-column prop="type" label="商品分类" v-rules="[{ type: 'required' }]" :maxlength=20>
            <!-- 字典 -->
            <template slot="show" slot-scope="scope">
                {{ scope.row.type | dic('category_dic') }}
            </template>

        </x-table-column>

定义了字典后，主表存储的种类字段将变为种类表的id，而在前台页面会通过该typeId翻译为种类表中的typeName字段

• 项目当中的问题

1.dom在浏览器上可以正常运行，但是在编译器中无法正常运行（待解决）
2.组件的局限性（底层写死了，改起来非常麻烦）