Vue3學習（二十一）- 文件管理頁面佈局修改

久曲健發表於2024-03-03
Vue

寫在前面

按照國際慣例，要先聊下生活，吐槽一番，今天是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狀態，這回我又好了。

哈哈，有點神叨叨的，只看技術部分，碎碎念略，怕影響正在閱讀的您，新年快樂，好運連連！

相關文章