123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250 |
- <template>
- <div class="p-tree">
- <TreeNode
- :multiple="multiple"
- :linkage="linkage"
- :lastStage="lastStage"
- v-for="(item, ind) in treeData"
- :key="item.id+'-'+ind"
- :treeItem="item"
- :triangleShow="!!(item.children&&item.children.length)"
- :index="String(ind)"
- :change="change"
- :leftPosition="leftPosition"
- />
- </div>
- </template>
- <script>
- import TreeNode from "./depend/treeNode";
- export default {
- name: "Tree",
- components: { TreeNode },
- props: {
- /**
- * 是否开启多选
- */
- multiple: {
- type: Boolean,
- default: false
- },
- /**
- * 是否联动选择
- */
- linkage: {
- type: Boolean,
- default: true
- },
- /**
- * 只能选择末级
- */
- lastStage: {
- type: Boolean,
- default: false
- },
- /**
- * 是否返回半选状态的id
- */
- notNull: {
- type: Boolean,
- default: false
- },
- /**
- * 树形结构数据列表
- */
- data: {
- type: Array,
- default: () => []
- },
- // 左侧距离
- leftPosition: {
- type: Number,
- default: 12
- }
- },
- computed: {
- treeData: {
- get() {
- return this.data;
- },
- set(newData) {
- return newData;
- }
- }
- },
- methods: {
- /**
- * 点击某项
- * @param obj 返回当前点击对象
- * @param index 索引串
- */
- change(obj, index) {
- const { id } = obj;
- if (this.multiple) {
- const iArr = index.split("-"); // 拿到索引值
- iArr.pop(); // 这里不需要遍历最后一个索引的数据
- const data = this.treeData;
- if (this.linkage) this.changeParentChecked(data, iArr);
- const checkedObj = this.filterIds(data);
- const checkedIds = checkedObj.map(d => d.id);
- /**
- * 点击某项返回的数据
- * @param id
- * @param checkedIds 选择的id组,多选时才返回
- * @param obj 选择的当前对象,多选时才返回
- * @param checkedObj 选择的对象组,多选时才返回
- * @type Function
- */
- this.$emit("change", { id, checkedIds, obj, checkedObj });
- } else {
- this.treeData = this.changeCheckedItem(this.treeData, id);
- /**
- * 点击某项返回的数据
- * @param id
- * @type Function
- */
- this.$emit("change", obj);
- }
- },
- /**
- * 单选改变状态
- * @param data
- * @param id
- * @return {*}
- */
- changeCheckedItem(data, id) {
- return data.map(d => {
- if (d.id === id) {
- d.checked = "checked";
- } else {
- d.checked = "uncheck";
- }
- if (d.children && d.children.length)
- d.children = this.changeCheckedItem(d.children, id);
- return d;
- });
- },
- /**
- * 递归筛选子项有选中的数据
- * @param data
- * @param iArr
- * @param curr 筛选到的数据放入数组
- */
- currentData(data, iArr, curr) {
- const ind = iArr.shift();
- data.forEach((d, i) => {
- if (ind && i === Number(ind)) {
- curr.unshift(d);
- if (d.children && d.children.length)
- this.currentData(d.children, iArr, curr);
- }
- });
- },
- /**
- * 筛选选中的id
- */
- filterIds(data) {
- const arr = [];
- this.recursionIds(data, arr);
- return arr;
- },
- /**
- * 筛选选中的id
- * @param data
- * @param arr
- */
- recursionIds(data, arr) {
- data.forEach(d => {
- if (this.notNull) {
- if (d.checked === "checked" || d.checked === "notNull") arr.push(d);
- } else {
- if (d.checked === "checked") arr.push(d);
- }
- if (d.children && d.children.length) this.recursionIds(d.children, arr);
- });
- }
- }
- };
- </script>
- <style lang="less">
- .p-tree {
- width: 100%;
- overflow-x: hidden;
- font-size: 0;
- }
- .p-tree-node {
- width: 100%;
- }
- .p-tree-node-content {
- position: relative;
- width: 100%;
- cursor: pointer;
- &:hover {
- background-color: #f5f6f7;
- }
- &.p-tree-node-content-checked {
- background-color: #e1f2ff;
- .p-tree-node-check {
- .p-tree-node-title {
- .p-tree-node-name {
- color: #0091ff;
- }
- }
- }
- }
- }
- .p-tree-svg {
- display: inline-block;
- vertical-align: middle;
- margin-right: 8px;
- width: 16px;
- height: 16px;
- line-height: 16px;
- text-align: center;
- .p-tree-icon-svg {
- vertical-align: text-bottom;
- transform: rotate(90deg);
- transition: transform 0.3s;
- }
- .p-tree-icon-rotate {
- transform: rotate(180deg);
- }
- }
- .p-tree-node-check {
- display: inline-block;
- vertical-align: middle;
- width: calc(100% - 24px);
- .p-tree-node-title {
- position: relative;
- display: inline-block;
- vertical-align: middle;
- user-select: none;
- width: calc(100% - 24px);
- .p-tree-node-name {
- width: 100%;
- height: 38px;
- line-height: 38px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- font-size: 14px;
- color: #1F2329;
- }
- }
- }
- .p-tree-node-content-disabled {
- // pointer-events none
- cursor: pointer;
- .p-tree-node-name {
- color: #004275 !important;
- }
- }
- .p-tree-child {
- width: 100%;
- }
- </style>
|