【Vue项目总结】基于饿了么组件封装
栏目: JavaScript · 发布时间: 5年前
内容简介:由于是后台管理项目,各种单据漫天飞,而且单据列表要可编辑,可验证,基于业务封装了业务需求:
vue
项目中,组件是项目的基石,每个页面都是组件来组装起来,我司没有自己的组件库,选用的是 ElementUI
组件库,在它的基础上再次封装。
可编辑表格
由于是后台管理项目,各种单据漫天飞,而且单据列表要可编辑,可验证,基于业务封装了 可编辑表格组件
业务需求:
- 每列可以编辑
- 每列输入的值需要被验证
每列可编辑,则需要每列的字段需要一个可编辑的属性 edit
来确定是否可以编辑,输入的值可以被验证,需要我们传入验证规则。
确认需要传入的 props
props: { // 表格数据 tableData: { type: Array, default: () => [] }, // 需要验证的列字段 columns: { type: Array, default: () => [] }, // 是否可编辑 defaultEdit: { type: Boolean, default: true }, // 验证集合 verifyRules: { type: Object, default: () => {} } }
表格传入数据后,初始化可编辑状态
阅读 el-table
源码,可以看到,表格组件拥有自己的 store
,一些需要通信的状态都是它来维护的,我们也可创建一个自有的 table-store.js 来维护编辑状态
// 初始化数据 this.store = new TableStore({ list: this.tableData, columns: this.columns, defaultEdit: this.defaultEdit });
可编辑列 edit-table-cell
利用 slot
插槽来传递编辑状态和验证规则
<slot v-else :cellState="cellState" :validateCell="validateCell"></slot> ... computed: { isInput() { return this.slotName === 'input'; }, rowState() { const states = this.editTable.store.states; const rowState = states.get(this.row); return rowState; }, cellState() { const cellState = this.rowState.get(this.prop); return cellState; } }, methods: { // 验证 validateCell(cb) { this.editTable .verifyTableCell(this.row, this.prop, this.cellState) .then(errMsg => { const valid = !errMsg; typeof cb === 'function' && cb(valid); }); } }
使用组件
// edit-table.vue <page-edit-table ref="editTable" v-model="tableData" :columns="['categoryName', 'name', 'purchaseDate']" :default-edit="true" :verify-rules="verifyRules" > <el-table ref="table" v-loading="loading" :data="tableData" tooltip-effect="dark" highlight-current-row border stripe style="width: 100%" > <el-table-column align="center" label="序号" width="50"> <template slot-scope="scope">{{ scope.$index + 1 }}</template> </el-table-column> <el-table-column label="品目名称" prop="categoryName" show-overflow-tooltip> <template slot-scope="{ row }"> <edit-table-cell :row="row" prop="categoryName"> <template slot-scope="{ cellState, validateCell }"> <el-select v-if="cellState.edit" v-model="row.categoryName" clearable placeholder="请选择品目" @change="validateCell" > <el-option label="你" value="1"></el-option> <el-option label="好" value="2"></el-option> <el-option label="呀" value="3"></el-option> </el-select> <span v-if="!cellState.edit">{{ row.categoryName }}</span> </template> </edit-table-cell> </template> </el-table-column> ....
效果如下
具体代码可查看 组件
增删改的树组件
el-tree
树形组件其实已经支持了 自定义节点内容 ,但是我们要在它的基础上改变 节点内容 ,这里主要是运用了 Vue.set
向响应式对象中添加一个属性。
// 部分代码 append(node, data) { const { label } = this.configProps; const newChild = { id: id++, [label]: `三级-${id}`, children: [], isEdit: false }; if (!data.children) { this.$set(data, 'children', []); } data.children.push(newChild); this.$emit('addNode', node, data); }, edit(node, data) { if (!node.isEdit) { this.$set(node, 'isEdit', true); } this.$nextTick(() => { this.$refs[`treeInput${node.id}`].focus(); }); this.$emit('editNode', node, data); }
效果如下:
总结
组件是项目的积木条,公用组件的封装成功与否其实是对项目的开发效率有直接影响。具体代码可查看 vue-template ,基于 vue-cli3.0
搭建的后台模版。
参考:
以上所述就是小编给大家介绍的《【Vue项目总结】基于饿了么组件封装》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 对于封装react组件的一些思考
- 封装自己的自定义转场组件
- 详解自定义ajax支持跨域组件封装
- 组件化页面:封装el-tree
- 组件化页面:封装el-table
- Vue封装一个简单轻量的上传文件组件的示例
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Building Web Reputation Systems
Randy Farmer、Bryce Glass / Yahoo Press / 2010 / GBP 31.99
What do Amazon's product reviews, eBay's feedback score system, Slashdot's Karma System, and Xbox Live's Achievements have in common? They're all examples of successful reputation systems that enable ......一起来看看 《Building Web Reputation Systems》 这本书的介绍吧!