| | |
| | | placeholder="请选择" |
| | | > |
| | | </tree-select> |
| | | |
| | | |
| | | <fks-tree |
| | | ref="tree" |
| | | :data="treedata" |
| | |
| | | :node-key="defaultProps.id" |
| | | :current-node-key="currentNodeKey1" |
| | | :default-expanded-keys="defaultExpandedKeys" |
| | | :expand-on-click-node="expandOnClickNode" |
| | | :highlight-current="true" |
| | | :filter-node-method="filterNode" |
| | | @node-click="handleNodeClick" |
| | | @node-drag-end="handleDragEnd" |
| | | draggable |
| | | > |
| | | <span class="custom-tree-node" slot-scope="{ node, data }"> |
| | | <span>{{ node.label }}</span> |
| | | <span v-if="node.isLeaf && isShowRightIcon"> |
| | | <span> |
| | | <fks-button |
| | | v-if="isShowEditIcon" |
| | | type="text" |
| | | size="mini" |
| | | icon="fks-icon-edit" |
| | | @click.stop="() => edit(data, node)" |
| | | > |
| | | </fks-button> |
| | | <fks-button |
| | | v-if="isShowDeleteIcon" |
| | | type="text" |
| | | size="mini" |
| | | icon="fks-icon-delete" |
| | | @click.stop="() => Delete(data, node)" |
| | | > |
| | | </fks-button> |
| | | </span> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { number } from 'echarts'; |
| | | import titleBoxVue from "./titleBox.vue"; |
| | | import treeSelect from "./treeSelect2.vue"; |
| | | |
| | |
| | | selectIsShow: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | expandOnClickNode: { |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | /**树 默认属性配置 */ |
| | | defaultProps: { |
| | |
| | | }, |
| | | /**下拉 默认选中值 */ |
| | | defaultSelectValue: { |
| | | type: String|Number, |
| | | type: String | Number, |
| | | default: "", |
| | | }, |
| | | /**树 默认展开节点keys */ |
| | |
| | | type: String, |
| | | default: "功能位置", |
| | | }, |
| | | /**是否显示右侧操作图标 */ |
| | | isShowRightIcon: { |
| | | /**是否显示右侧编辑操作图标 */ |
| | | isShowEditIcon: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | /**是否显示右侧删除操作图标 */ |
| | | isShowDeleteIcon: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | |
| | | default: false, |
| | | }, |
| | | /**是否点击叶子才关闭下拉框 */ |
| | | isleafclose:{ |
| | | isleafclose: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | |
| | | return { |
| | | filterText: "", |
| | | selectvalue: "", |
| | | currentNodeKey1:'', |
| | | currentNodeKey1: "", |
| | | }; |
| | | }, |
| | | created() {}, |
| | | mounted() { |
| | | this.selectvalue = this.defaultSelectValue; |
| | | }, |
| | | computed: { |
| | | |
| | | }, |
| | | mounted() {}, |
| | | computed: {}, |
| | | watch: { |
| | | filterText(val) { |
| | | this.$refs.tree.filter(val); |
| | |
| | | if (this.treedata.length && key === "") { |
| | | key = this.treedata[0][this.defaultProps.id]; |
| | | } |
| | | this.currentNodeKey1=key |
| | | this.currentNodeKey1 = key; |
| | | this.$nextTick(() => { |
| | | this.$refs.tree.setCurrentKey(this.currentNodeKey1); // 设置默认选中 |
| | | }); |
| | | this.$refs.tree.setCurrentKey(this.currentNodeKey1); // 设置默认选中 |
| | | }); |
| | | }, |
| | | defaultSelectValue(val) { |
| | | this.selectvalue = val; |
| | | }, |
| | | }, |
| | | methods: { |
| | | |
| | | /**拖动树结束事件 */ |
| | | handleDragEnd(draggingNode, dropNode, dropType, ev) { |
| | | console.log('tree drag end: ',draggingNode, dropNode , dropType,ev); |
| | | }, |
| | | edit(data, node) { |
| | | // console.log(data, node, 122); |
| | | this.$emit("treeEdit", data, node); |
| | | }, |
| | | Delete(data, node) { |
| | | // console.log(data, node, 122); |
| | | this.$emit("treeDelete", data, node); |
| | | }, |
| | | selectChange(label, node) { |
| | | console.log(label, node,177) |
| | | console.log(label, node, 177); |
| | | this.$emit("selectchange", label, node); |
| | | }, |
| | | handleNodeClick(data) { |