Vue3学习（二十一）- 文档管理页面布局修改

写在前面

按照国际惯例，要先聊下生活，吐槽一番，今天是2月14日，也是下午听老妈说，我才知道！

现在真的是对日期节日已经毫无概念可言，只知道星期几。

现在已经觉得写博客也好，学习文章也罢，和写日记一样，已经融入到我的生活中，或者更确切的说，变成生活的一部分了。

饭后和老妈闲聊了几句后，我发现现在真的是对做什么都提不起兴趣， 也没有什么特别期待的事，对相亲特别排斥，而且毫无期待而言，甚至没法相信任何一个女孩。

听妈妈说，她和一个阿姨今天在散步时，阿姨告诉妈妈，说我和前任分手后，前任的妈妈到处说我的坏话。

妈妈却很平静的和那个阿姨说，嘴巴长在她身上，我们也管不着，她愿意讲究就讲吧！

我听完刚开始还挺气的，后来，我却很开心，真的庆幸我没和她结婚，就前任的妈妈，也是绝了，都分手了，就各自安好得了呗，为嘛还要不依不饶呢！

布局优化修改

加完复文本编辑器在编辑和新增的model上显示真的好丑，所以打算改个布局吧。

1、使用24 栅格调整布局

将表单和table表格布局做下微调，示例代码如下：

<a-row>
    <a-col :span="12">col-12</a-col>
    <a-col :span="12">col-12</a-col>
</a-row>

2、table表格字段显示优化

去掉父文档和顺序字段显示，示例代码如下：

// 使用reactive进行数据绑定
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: 'Action',
    dataIndex: 'action',
  }
];

3、树形数据默认全部显示

示例代码如下：

<a-table
        v-if="level1 && level1.length"
         :defaultExpandAllRows="true"
         :columns="columns"
         :data-source="level1"
         :pagination="false"
         :loading="loading"
         size="small"
>

4、效果

写在最后

本来以为布局啥的全整完了，结果落到博客上才发现，富文本编辑器没了，直接把一个功能给干掉了，尴尬！

在编写1-4步的过程中，我还处于emo状态，这回我又好了。

哈哈，有点神叨叨的，只看技术部分，碎碎念略，怕影响正在阅读的您，新年快乐，好运连连！