предисловие

В связи с потребностями продукта компании (на базе vue.js) для реализациидревовидная формаBaidu и Google искали функцию . Поэтому я использовал vue, чтобы сделать его самостоятельно, и я надеюсь, что вы можете дать мне больше советов.

Основные технические моменты:vue子组件的递归实现及相关样式的实现

реализация древовидной формы

• визуализации (Demo)

  

• основной код

Страница index.vue реализует код бизнес-логики, например, реализацию некоторых кнопок операций в таблице дерева и сбор данных.

<template>
  <div class="contains">
    <h1>树表格实现</h1>
    <tree-table ref="recTree"
    :list.sync="treeDataSource"
    @actionFunc="actionFunc"
    @deleteFunc="deleteFunc"
    @orderByFunc="orderByFunc"></tree-table>
  </div>
</template>
<script>
import treeTable from '@/components/tree-table.vue'
export default {
  data() {
    return {
      list: [], // 请求原始数据
      treeDataSource: [] // 组合成树表格接收的数据
    }
  },
  components: {
    treeTable
  },
  methods: {
    orderByFunc(val) {
      alert('排序')
      alert(val)
    },
    actionFunc(m) {
      alert('编辑')
    },
    deleteFunc(m) {
      alert('删除')
    }
  }
}
</script>

原始数据`list`：是不包含子数据的数据结构，即没有层级结构，例如：
[{id:111,parentId:0,name:'父及'},{id:111,parentId:111,name:'子级'}...]，通过parentId来获取对应父子层级结构
`treeDataSource`：是树表格需要的数据结构，例如：
[{id:0,name:'父及',children:[{id:10,name:'子级',children:[]}]},...]

Если серверная часть возвращает вам исходный формат данных, вы можете использовать следующий метод для инкапсуляции структуры данных, которая может использоваться древовидной таблицей:

    getTreeData() {
      // 取父节点
      let parentArr = this.list.filter(l => l.parentId === 0)
      this.treeDataSource = this.getTreeData(this.list, parentArr)
    },
    // 这里处理没有children结构的数据
    getTreeData(list, dataArr) {
      dataArr.map((pNode, i) => {
        let childObj = []
        list.map((cNode, j) => {
          if (pNode.Id === cNode.parentId) {
            childObj.push(cNode)
          }
        })
        pNode.children = childObj
        if (childObj.length > 0) {
          this.getTreeData(list, childObj)
        }
      })
      return dataArr
    }

страница tree-table.vue. Эта страница является ключевой для реализации древовидной таблицы. Основной код выглядит следующим образом:

<template>
	<div class="tree-table">
		<div class="tree-head">
			<table>
				<tr>
					<td class="td1">职位名称</td>
					<td class="td2">负责人</td>
					<td class="td3" @click="isDesc=!isDesc">
						创建时间
						<div class="arrow">
							<span class="up-arrow" :class="{'sort':isDesc}"></span>
							<span class="down-arrow" :class="{'sort':!isDesc}"></span>
						</div>
					</td>
					<td class="td4">工作经验</td>
					<td class="td5">发布时间</td>
					<td class="td6">操作</td>
				</tr>
			</table>
		</div>
		<div id="scrollWrap" class="tree-wrap">
			<div class="tree-body">
				<table v-if='treeDataSource.length>0'>
					<tbody>
						<tr>
							<td>
								<tree-item
									v-for="(model,i) in treeDataSource"
                                    :key="'root_node_'+i"
									:root="0"
									:num="i"
									@actionFunc="actionFunc"
									@deleteFunc="deleteFunc"
									:nodes="treeDataSource.length"
									:trees.sync="treeDataSource"
									:model.sync="model">
								</tree-item>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>

Сначала подкомпоненты здесьtree-itemНа странице нет вступления, но его тоже можно использовать в обычном режиме. Вот ключевой момент, потому что этот подкомпонент должен быть реализован рекурсивно, поэтому его необходимо динамически зарегистрировать в текущем компоненте. Код выглядит следующим образом (поскольку кода слишком много, давайте сначала отобразим его,кликните сюдаВы можете увидеть исходный код):

Подкомпонент кажется здесь странным, но для того, чтобы рекурсировать, я пока думаю только об этом методе. Если есть лучший способ, пожалуйста, оставьте сообщение для исправления.
Итак, где реализована структура древовидной таблицы? ? Да, он есть в шаблоне дочернего компонента (template), код не будет размещен здесь, вы можете перейти кисходный кодПроверять.

• благодарный

ПолучатьfavourliИсправление, оригинальный метод письма был обновлен и принятрекурсивный компонентдобиться, чтобы страница выглядела более четкой.

	components: {
			treeItem: () => import('./tree-item.vue')
	}

---

Еще одна вещь: не смотрите только на часть js, часть css является ключом к этой древовидной таблице. Конечно, я использую множество вычисляемых свойств, чтобы судить об отображении различных стилей, и есть еще один способ, то есть вinitTreeDataЭтот метод предназначен для обработки или добавления некоторой информации, используемой нашей древовидной таблицей. Например, смещение иерархической линии, которую я реализую в ней сейчасm.bLeft = level === 1 ? 34 : (level - 2) * 16 + 34Если вы не понимаете этот расчет, вы можете оставить сообщение.

Наконец, эта статья является моей вводной статьей.Если у вас есть какие-либо вопросы, пожалуйста, включите больше и дайте больше советов! ! ! Кстати, рекламируйте мой блог, который давно не обновлялся, Добро пожаловать, чтобы нажать (город)

• Адрес источникаgithub, добро пожаловать звезда.

Справочные ресурсыСтарик по соседству