我第一次开发了 Mini计划，并准备陷入坑中，但我没想到它会这么大！呢呢

这次我使用2.0版，而不是1.0，不要问我为什么不使用1.0，哈哈哈，为什么我喜欢使用新的

，因此掉入坑中意味着您自己遭受了苦难。

首先，引入了普通下载。我已经在上一篇文章中谈到了如何操作它，所以我现在不会再说很多。附加了上一篇文章CSDN的链接

我正在使用DEAD多柱模式和多列模式。

属性通过数据。如果是次要链接，则通过数据，官方示例

不幸的是，组件本身没有提供数据，我们需要自己定义本地数据。

然后我发现的数据结构就是这样。 。

const area = [{ "value": '北京市', "label": '北京市', "children": [{ "vallue": '北京城区', "label": '北京城区', "children": [{ "value": '东城区', "label": '东城区', ..... }] }] }]

因为这是省，城市和地区之间的三层联系，所以我必须传达的是三维数据，并且可以通过转换数据的过程。

// 处理省市区数据 formatData() { var prov = [] //省份数组 var shi = [] //市数组 var qu = [] //区数组 cities.forEach((provItem, provIndex) => { prov.push(provItem.value) if (provItem.children.length > 0) { provItem.children.forEach((shiItem, shiIndex) => { if (shi[provIndex] == null) { shi[provIndex] = [shiItem.value] } else { shi[provIndex].push(shiItem.value) } if (shiItem.children.length > 0) { shiItem.children.forEach((quItem, quIndex) => { if (qu[provIndex] == null) { qu[provIndex] = [ [quItem.value] ] } else { if (qu[provIndex][shiIndex] == null) { qu[provIndex][shiIndex] = [quItem.value] } else { qu[provIndex] [shiIndex].push(quItem.value) } } }) } }) } }) this.columns.push(prov, shi[0], qu[0][0])

经过一些曲折之后，我终于得到了以下数据

然后坑到了，我分配了要显示的值？ ？ ？ ？显示两个数据时发生了什么？ ？ “？有什么大个子可以看到发生了什么事吗？

起初，我认为这是一个时尚问题，然后我改变了风格。 。 。

班级名称是通过控制台找到的

在VUE组件中，将属性添加到标签中，以便此处定义的CSS仅对当前组件中的元素作用，因此组件之间的样式不会彼此污染并使样式私有化。例如，如果您在父组件中使用子组件，则父组件的样式不会渗透到子组件中。因此，我们需要使用深度操作选择器 /深 /，然后根本不起作用。 。 。组件的样式无法修改

好的，我最好说实话。0。 。 。

完成了！呢呢

任何有解决方案的人，请评论并踢我！呢呢