-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
41 lines (41 loc) · 16 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[Iview组件库之tree的第二种实现]]></title>
<url>%2F2019%2F03%2F30%2FIview%E7%BB%84%E4%BB%B6%E5%BA%93%E4%B9%8Btree%E7%9A%84%E7%AC%AC%E4%BA%8C%E7%A7%8D%E5%AE%9E%E7%8E%B0%2F</url>
<content type="text"><![CDATA[Iview组件库之tree让我们看一下实现的效果 通过Iview组件库中的tree的on-select-change事件实现。 点击树节点时触发，可以返回当前已选中的节点数组、当前项 我们需要写两个组件树组件 三个按钮，一个用来添加，一个用来修改，一个用来删除 <template> <Card ref="cardTable"> <Button type="info" size="small" icon="md-add" @click="handleAdd(currentNode,currentRoot)">添加</Button> <Button type="primary" size="small" icon="md-create" @click="handleEdit(currentNode,currentRoot)">修改</Button> <Button type="error" size="small" icon="md-close" @click="handleDelete(currentNode,currentRoot)">删除</Button> <tree :data="treeData" @on-select-change="handleSelectChange" ref="tree"> </tree> <ColumnFormModal :currentColumnParent="currentColumnParent" :currentNodeKey="currentNodeKey" :showModal="showModal" :treeObj="treeObj" @modal-visible-change="modalVisibleChange" ></ColumnFormModal> </Card> </template> <script> import ColumnFormModal from './ColumnFormModal' export default { name: 'Column', components: { ColumnFormModal }, data () { return { // 用来给tree的data属性赋值 treeData: [], // 用来接收后台传来的树List treeList: null, // 编辑模态框 showModal: false, // 选中的当前node currentNode: {}, // 选中的树的根节点 currentRoot: {}, // 树对象 treeObj: {}, // 当前选中节点的nodeKey currentNodeKey: 0, // 当前选中节点的父节点的nodeKey currentColumnParent: 0 } }, props: {}, computed: {}, methods: { // 响应弹窗的变化 modalVisibleChange (visible) { this.showModal = visible // 递归查询树结构 this.initTreeList() }, // 选中树节点触发的方法 handleSelectChange (root, node) { this.currentNode = node this.currentRoot = root }, // 新增按钮触发的方法 handleAdd (currentNode) { console.log(currentNode) // 声明一个数组 let treeNode = currentNode.children ? currentNode.children : [] // console.log(treeNode) // 声明一个对象 let column = {} // 新增节点，新增的节点的名字是 ‘新增节点’ // 修改名字需要点击修改按钮 treeNode.push({ title: '新增节点', parent: currentNode.id, expend: true, isEdit: false, children: [] }) column.columnTitle = treeNode[treeNode.length - 1].title column.columnParent = treeNode[treeNode.length - 1].parent column.childColumn = [] column.nodeKey = currentNode.nodeKey console.log(column) this.saveOrUpdateColumn(column) }, // 编辑按钮触发的方法 handleEdit (currentNode, currentRoot) { this.showModal = true this.treeObj = Object.assign({}, currentNode) console.log(currentNode) this.currentColumnParent = currentNode.columnParent this.currentNodeKey = currentNode.nodeKey console.log(this.currentColumnParent) console.log(this.currentNodeKey) }, // 删除按钮触发的方法 handleDelete (currentNode, currentRoot) { let id = currentNode.id this.deleteColumn(id) this.initTreeList() }, // 查询树结构 initTreeList () { this.axios.request('GET', '接口').then(response => { if (response.status === 200) { this.treeList = response.data this.getTree(this.treeList) this.treeData = this.treeList } }) }, // 递归解析树结构 getTree (parents) { if (parents === undefined) { return } parents.forEach(item => { item.title = item.columnTitle item.children = item.childColumn this.getTree(item.childColumn) }) }, // 调用后台新增或者编辑的接口 // 参数是实体 saveOrUpdateColumn (column) { this.axios.request('POST', '接口', column).then((response) => { let status = response.status if (status === 200) { this.initTreeList() } else { // 提示错误 let errorMsg = '[' + response.errorCode + ']:' + response.errorMsg this.$Notice.error({ title: '错误', desc: errorMsg, duration: 5 }) } }) }, // 调用后台删除的接口 // 根据id删除 deleteColumn (id) { this.axios.request('POST', '接口', {id}).then(response => { let status = response.status if (status === 200) { this.initTreeList() } else { // 提示错误 let errorMsg = '[' + response.errorCode + ']:' + response.errorMsg this.$Notice.error({ title: '错误', desc: errorMsg, duration: 5 }) } }) } }, watch: { showModal (val) { this.visible = val }, visible (val) { this.$emit('modal-visible-change', val) } }, created () { // 查询树 this.initTreeList() }, mounted () { } } </script> <style> </style> 模态框 <template> <div> <Modal v-model="visible" title='编辑' @on-visible-change="visibleChange" :mask-closable="false"> <Form ref="form" :model="columnModal" :label-with="80"> <FormItem prop="columnTitle" label="栏目名称"> <Input v-model="columnModal.columnTitle"/> </FormItem> </Form> <div slot="footer"> <Button @click="cancel" :disabled="requestLoading">取消</Button> <Button type="primary" @click="submit" :loading="requestLoading">{{requestLoading ? '正在提交' : '提交'}}</Button> </div> </Modal> </div> </template> <script> import {mapGetters} from 'vuex' export default { name: 'ColumnFormModal', components: {}, data () { return { visible: false, columnModal: {} } }, props: { showModal: { type: Boolean, required: true }, processObj: { type: Object, required: false }, currentNodeKey: { type: Number | Object, required: true }, currentColumnParent: { type: Number | Object, required: true } }, computed: { ...mapGetters([ 'requestLoading' ]) }, methods: { // 响应显示与否 visibleChange (status) { // 显示时初始化动作 if (status) { } else { // 关闭时抛出事件 this.$emit('modal-visible-change', false) } }, // 提交 submit () { this.$refs['form'].validate((valid) => { if (valid) { this.columnModal.columnParent = this.currentColumnParent this.columnModal.nodeKey = this.currentNodeKey console.log(this.columnModal) this.axios.request('POST', 'message/column/saveOrUpdateColumn', this.columnModal).then((response) => { let status = response.status if (status === 200) { this.$Notice.success({ title: '栏目编辑' + '成功', duration: 3 }) this.$emit('on-oper-success', this.columnModal) } else { // 提示错误 let errorMsg = '[' + response.errorCode + ']:' + response.errorMsg this.$Notice.error({ title: '栏目编辑' + '失败', desc: errorMsg, duration: 5 }) } }).finally(() => { this.visible = false }) } }) }, cancel () { this.visible = false // 清空校验信息 this.$refs['form'].resetFields() // 关闭时抛出事件 this.$emit('modal-visible-change', false) } }, watch: { showModal (val) { this.visible = val this.columnModal = Object.assign({}, this.treeObj) }, visible (val) { this.$emit('modal-visible-change', val) } }, created () {}, mounted () {} } </script> <style> </style> githubhttps://github.com/zhangzheming629/IView/tree/master/tree2]]></content>
<categories>
<category>vue</category>
</categories>
<tags>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title><![CDATA[iView组件库之下拉框dropdown(树形结构)]]></title>
<url>%2F2019%2F03%2F29%2FIview%E7%BB%84%E4%BB%B6%E4%B8%8B%E6%8B%89%E6%A1%86%E6%A0%91%E5%BD%A2%E7%BB%84%E4%BB%B6%2F</url>
<content type="text"><![CDATA[Iview组件下拉框树形组件iview官方示例 实现的效果 dropdown有个属性 transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false 赋值给它 false，这样不会因为失去焦点，而有部分内容会”消失” 我们观察iview给出的示例 <template> <Dropdown> <a href="javascript:void(0)"> 北京小吃 <Icon type="ios-arrow-down"></Icon> </a> <DropdownMenu slot="list"> <DropdownItem>驴打滚</DropdownItem> <DropdownItem>炸酱面</DropdownItem> <DropdownItem>豆汁儿</DropdownItem> <Dropdown placement="right-start"> <DropdownItem> 北京烤鸭 <Icon type="ios-arrow-forward"></Icon> </DropdownItem> <DropdownMenu slot="list"> <DropdownItem>挂炉烤鸭</DropdownItem> <DropdownItem>焖炉烤鸭</DropdownItem> </DropdownMenu> </Dropdown> <DropdownItem>冰糖葫芦</DropdownItem> </DropdownMenu> </Dropdown> </template> export default { } 我们可以发现Dropdown是下拉框未选择时的名字DropdownMenu里有每个下拉框的子项DropdownItem如果当某个下拉框的子项有子项时，这个下拉框的子项是Dropdown和DropDownItem组成，它的子项是由DropdownMenu和DropdownItem组成。因此我们需要构造这样的层级关系。 我们需要写两个组件 树结构组件 递归组件(递归调用自己) 递归组件 // 未选中的值，如果有值选中，则改为选中的值 import ColumnDropTree from './ColumnDropTree' export default { name: 'ColumnTree', components: { ColumnDropTree }, data () { return { parent: Array, treeTop: '请选择', } }, props: { treeValue: Array | Object, }, computed: {}, methods: { // 子组件向父组件上抛的一个事件，用来传递下拉框中选中的值 childByValue (childValue) { this.treeTop = childValue this.$emit('checkByValue', this.treeTop) } }, watch: { }, created () { }, mounted () { } } 树组件 <!-- 树节点的子节点 --> <template> <div class="tree-view-item"> <div v-for="node in parent" :key="node.id"> // 当节点有孩子节点而且孩子节点的长度大于0 进行递归 <div v-if="node.childColumn && node.childColumn.length > 0"> <Dropdown :transfer="false" @on-click="handleClick" placement="right-start"> <DropdownItem :name="node.columnTitle"> {{node.columnTitle}} </DropdownItem> <DropdownMenu slot="list"> <ColumnDropTree :parent="node.childColumn"></ColumnDropTree> </DropdownMenu> </Dropdown> </div> <div v-else> // 否则不递归 <DropdownItem :name="node.columnTitle"> {{node.columnTitle}} </DropdownItem> </div> </div> </div> </template> <script> import ColumnDropTree from './ColumnDropTree' export default { name: 'ColumnDropTree', components: { ColumnDropTree }, data () { return { parentName: '', childValue: '' } }, props: { parent: Array }, computed: {}, methods: { // 上抛事件 把选中的值上抛给父组件 handleClick (name) { this.childValue = name this.$emit('childByValue', this.childValue) } }, watch: { parent (val) { console.log(parent) } }, created () { }, mounted () {} } </script> <style> </style> 我的githubhttps://github.com/zhangzheming629/IView/tree/master/dropDown]]></content>
<categories>
<category>vue</category>
</categories>
<tags>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Iview组件库树形控件增删改]]></title>
<url>%2F2019%2F03%2F27%2FIview%E7%BB%84%E4%BB%B6%E6%A0%91%E5%BD%A2%E6%8E%A7%E4%BB%B6%E5%A2%9E%E5%88%A0%E6%94%B9%2F</url>
<content type="text"><![CDATA[Iview组件库树形控件增删改iview组件库中有个树组件tree，根据官方示例，通过自定义组件实现renderContent的效果，实现了树组件的增删改操作。 实现的效果 iview中tree示例由iview官方文档我们可以知道，tree是有root、node、data组成。root 是根节点node:当前节点data:当前节点的数据 让我们开始用代码实现它tree Component基本 <Tree :data=”treeData” :render=”renderContent” data是tree的一个props，用来生成tree的数据，类型是Array，默认值是[]。通过treeData给data赋值 render是tree的一个props，用来自定义渲染内容我们通过renderContent方法实现自定义的render效果 import TreeRender from './TreeRender' export default { name: 'Column', components: {}, data () { return { treeData: [], // 树结构 treeList: null } }, renderContent (h, {root, node, data}) { let that = this return h(**TreeRenderRender**, { props: { treeRoot: root, treeNode: node, treeData: data }, on: { nodeAdd: (d) => that.handleAdd(d), nodeEdit: (r, n, d) => that.handleEdit(r, n, d), nodeDel: (r, n, d) => that.handleDelete(r, n, d), nodeAfterEdit: (r, n, d) => that.handleAfterEdit(r, n, d) } }) }, nodeAdd是添加方法 nodeEdit是点击编辑后的方法 nodeAfterEdit是编辑后失去焦点的方法 nodeDel是删除的方法 render基本组件 <span> <span v-if="isEdit"> <input size="small" v-model="treeData.title" autofocus @blur="nodeEditPass(treeRoot,treeNode,treeData)"/> </span> <template v-else> <span>{{treeData.title}}</span> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <span v-show="!isEdit"> <Button type="info" size="small" icon="md-add" @click="nodeAdd(treeData)">添加</Button> <Button type="primary" size="small" icon="md-create" @click="nodeEdit(treeRoot,treeNode,treeData)">修改</Button> <Button type="error" size="small" icon="md-close" @click="nodeDel(treeRoot,treeNode,treeData)">删除</Button> </span> </template> </span> props: { // 树的根节点 treeRoot: { type: Array }, // 当前节点 treeNode: { type: Object }, // 当前节点的数据 treeData: { type: Object } nodeAdd (d) { this.$emit('nodeAdd', d) }, nodeEdit (r, n, d) { this.isEdit = true d.isEdit = this.isEdit d.title = this.treeData.title this.$set(d, 'isEdit', d.isEdit) this.$set(d, 'title', d.title) this.$emit('nodeEdit', r, n, d) }, nodeEditPass (r, n, d) { // 编辑完成 this.isEdit = false d.isEdit = this.isEdit d.title = this.treeData.title this.$set(d, 'isEdit', d.isEdit) this.$set(d, 'title', d.title) this.$emit('nodeAfterEdit', r, n, d) }, nodeDel (r, n, d) { this.$emit('nodeDel', r, n, d) } 通过$emit的方式将增、改、删的操作抛给column组件 思考一下我们还缺少什么？ 负责给绑定data的treeData 因为data是Array，需要写一个递归方法 增删改的方法的实现 详细代码见我的githubhttps://github.com/zhangzheming629/IView/tree/master/tree]]></content>
<categories>
<category>vue</category>
</categories>
<tags>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Hello World]]></title>
<url>%2F2018%2F06%2F19%2Fhello-world%2F</url>
<content type="text"><![CDATA[Hello world 从对github的了解和使用，购买域名以及DNS解析，个人博客终于搭建好了我会这里记录自己工作以及生活上的点点滴滴，以及一些学习的心得。Coding your ambition!]]></content>
</entry>
</search>