前端組件化設計——布局、邏輯、視圖

一、拆分頁面：將一個頁面拆分成幾個部分，如：父子包裹、左右或上下布局

<!-- 上下布局 -->
<template>
  <el-card
    style="background: #fff;min-height: 800px"
    shadow="never">
    <div
      slot="header"
      style="height: 28px">
      <!-- 標題 -->
      <span>xxxx列表<span/>
    </div>
    <!--內容-->
    <div>
      <featureTable :parameters="parameters"/>
    </div>
  </el-card>
</template>

二、表格操作部分，屬於中間件——處理復雜邏輯、數據轉換

1.純展示的表格

<template>
  <el-card id="activityManage">
    <div slot="header">
      <el-button
        type="primary"
        @click="addRowDialog"
      >新建</el-button>
    </div>
    <el-row >
      <el-col>
        <CommonTable
          :table-data="tableData"
          :table-column="tableColumn"
          height="680"
          :loading="listLoading"
        >
          <el-table-column
            type="index"
            label="序號"
            align="center"
            width="60"
            slot="header">
            <template slot-scope="scope">
              {{ (currentPage-1)*pageSize+scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="150"
            slot="footer">
            <template slot-scope="scope">
              <el-button-group>
                <el-button
                  type="primary"
                  @click="editRowDialog(scope.$index, scope.row)">編輯</el-button>
                <el-button
                  type="danger"
                  @click="deleteRowDialog(scope.$index, scope.row)">刪除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </CommonTable>
        <!-- 分頁 -->
        <Pagination
          style="margin-top:20px"
          :table-begin="tableBeigin"
          @changTable="getTablePage"/>
        <!-- 2.對話框 -->
        <el-dialog
          top='60px'
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          :width="dialogWidth"
          :close-on-click-modal="false"
          :show-close="!showCancelButton"
        >
          <component
            :is='componentType'
            :show-btn='showCancelButton'
            :form-info='formInfo'
            @form-change='hanldeFormChange'
          />
        </el-dialog>
    </el-row>
  </el-card>
</template>

2.復雜的內容需要自定義

<template>
  <div>
    <!-- 新建+搜索 -->
    <el-row>
      <el-col :span="4">
        <el-button
          type="primary"
          @click="featureNew"
        >新建xxx</el-button>
      </el-col>
      <el-col
        :span="4"
        :offset="parameters.privatePage==='個人'?16:20">
        <el-input
          v-model="searchInfo"
          placeholder="關鍵字搜索"
          clearable
          @clear="searchInfoMatch"
          @keyup.enter.native="searchInfoMatch(searchInfo)">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchInfoMatch(searchInfo)"/>
        </el-input>
      </el-col>
    </el-row>
    <!-- 自定義表格合並 -->
    <el-table
      style='margin-top:20px'
      v-loading="parameters.loading"
      :data="tableData"
      border
      :span-method="colspanMethod"
    >
      <el-table-column
        show-overflow-tooltip
        width="120"
        align="center"
        prop="type"
        label="xx分類"
      />
      <!--操作-->
      <el-table-column
        align="center"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              @click="tableRowChange(scope, 'edit')"
              type="primary"
              :disabled="scope.row.app_id===''">查看編輯</el-button>
          </el-button-group>
          <el-dropdown
            trigger="click">
            <el-button type="primary">
              更多<i class="el-icon-arrow-down el-icon--right"/>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                style="padding:0"
                v-for="(item,index) in tableRowMore"
                :key='index'>
                <el-button
                  style="padding: 7px 15px;width:100%"
                  @click="tableRowChange(scope, item.action)"
                  type="text"
                  :disabled="scope.row.app_id===''">{{ item.name }}</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分頁組件 -->
    <el-pagination
        style="margin-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"/>
    <!-- 2.對話框 -->
    <el-dialog
      top='60px'
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
      :close-on-click-modal="false"
      :show-close="!showCancelButton"
    >
        xxx表單內容xxx
        <span slot="footer">
          <el-button
            @click="handleClose('ruleForm')">取消</el-button>
          <el-button
            type="primary"
            @click="submitNewActivity('ruleForm')">確定</el-button>
        </span>
    </el-dialog>
</template>

三、展示組件：

比如通用表格組件、搜索框組件、分頁組件、表單校驗組件（如果大於1個使用component組件動態切換）、按鈕彈框（放大編輯）、通用的編輯器組件、可視化圖形組件等，當然通用的函數、數據配置等也可以抽離出來，或者使用第三方庫實現：

import CommonTable from 'module-comp/table/CommonTable'

import _ from 'lodash' // 第三方庫
import {getSpanArr} from '@/utils/xxxManage'// 公共的方法或數據配置
import canvasInstanceStatus from 'mixins/xxxStatus'// 插入實現方法，比較隱晦不好維護mixins:[xxx]
import Pagination from './Pagination'// 通用的分頁組件或自定義需要的內容

化繁為簡:

比如上面的表格操作比較繁瑣，使用數組遍歷輸出菜單，設置通用的方法調用（設置一個type區分）；

又如：表格輸出列自適應時，標題也可以設置成一個數組格式，通過遍歷的形式進行輸出，示例在下面；

 

    <el-table
      :max-height="height"
      ref="commonTable"
      :data="tableData"
      :size="size"
      :stripe="stripe"
      border
      highlight-current-row
      v-loading="loading"
      :row-class-name="tableRowClassName"
      @filter-change="filterChange"
      @selection-change="handleSelectionChange"
      :row-key="rowKey"
    >
      <!--自定義插入-->
      <slot name="header"/>
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="`key_${index}`"
        :prop="item.prop"
        :label="item.label"
        show-overflow-tooltip
        :sortable='sortable'
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="tableColumn[index].prop === 'field_key'">
            <span>{{ keyOptionsObj[scope.row.field_key] }}</span>
          </div>
          <div v-else>
            <span>{{ scope.row[tableColumn[index].prop] }}</span>
          </div>
        </template>
      </el-table-column>
      <!--自定義插入-->
      <slot name="footer"/>
    </el-table>

 

需要注意的問題：組件的通訊問題，通常組件需要進行聯動效果，這需要注意傳值的技巧（只傳一個對象）、以及回調方法盡量設置到中間件（連續回調2次以上就不利於維護了）......