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

写在前面

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

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

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

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

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

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

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

布局优化修改

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

1、使用24 栅格调整布局

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

html 复制代码
<a-row>
    <a-col :span="12">col-12</a-col>
    <a-col :span="12">col-12</a-col>
</a-row>

2、table表格字段显示优化

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

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

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

示例代码如下:

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

4、效果

写在最后

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

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

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