日本韩国一区二,青青草视频观看,有码专区在线视频

[Talk is cheap. Show me the code]
不想看理論知識請直接移步最后代碼示例。

一、封裝目的

在使用ElementUI過程中，發(fā)現(xiàn)一些組件的代碼量還是過多，并且項目中頻繁使用，所以就對組件進行了二次封裝，并記錄在博客中，歡迎共同討論學習。

二、代碼示例

2.1 MessageBox的封裝

/**
   * 封裝 在一個叫commonFn的公共服務里面
   * @param {*彈窗提示信息} msgContent
   * @param {*彈窗標題} msgTitle
   * @param {*彈窗類型:
   * 'warning',
   * 'success ',
   * 'info',
   * 'error'
   * 四種類型
   * } msgType
   */
    MessageBox(
    msgContent = '此操作將永久刪除此條數(shù)據(jù), 是否繼續(xù)?',
    msgTitle = '提示信息',
    msgType = 'warning') {
    var msgBox = MessageBox.confirm(msgContent, msgTitle, {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: msgType
    })
        return msgBox
     }

/**
   * 哪里需要在哪里調用即可。
   *common是一個公共的函數(shù)服務，鏈式調用即可。
   *參數(shù)與封裝的相對應。
   */
   commonFn.MessageBox('ds', '23', 'success').then(()=> {
     console.log('確認回調')
   }).catch(() => {
     console.log('取消回調')
   })

2.2 el-table表格的封裝

el-table組件封裝，這個是同事有封裝過得，我在原有的基礎上進行了一定的改動，代碼量比較多，很多參數(shù)ElementUI上都有，詳情參加：Element中文教程

  <el-table
      :key="tableKey"
      :data="list"
      stripe
      fit
      highlight-current-row
      tooltip-effect="light"
      style="width: 100%;"
      :cell-style="{'vertical-align':'left','padding':'6px'}"
      @selection-change="handleSelectionChange"
      @cell-click="handleColumn"
      @select="selectBox"
      @select-all="selectBoxAll"
    >
      <el-table-column
        v-if="carlist"
        type="selection"
        width="55"
      />
      <el-table-column
        v-for="(item,i) in tableColumu"
        :key="i"
        :label="item.label"
        :prop="item.field"
        :min-width="item.width"
        :formatter="formatterParmas"
      >
        <template slot-scope="scope">
          <span v-if="item.field==='address_type'">{{ scope.row[item.field] | addressTypeFilter }}</span>
          <span v-else-if="item.field==='is_default'">
            <el-checkbox v-model="scope.row[item.field]" true-label="1" false-label="0" disabled />
          </span>
          <span v-else-if="item.field==='source'">
            {{ scope.row[item.field]|sourceFilter(scope.row[item.field]) }}
          </span>
          <span v-else-if="item.field==='audit_status'">
            <span v-if="scope.row[item.field]=='0'" style="color:#FFAA00">待審核</span>
            <span v-if="scope.row[item.field]=='1'" style="color:#F34B4B">審核拒絕</span>
            <span v-if="scope.row[item.field]=='2'" style="color:#6BCE41">審核通過</span>
          </span>

          <span v-else-if="item.field==='org_type'">
            <span v-if="scope.row[item.field]=='0'">承運商</span>
            <span v-if="scope.row[item.field]=='1'">貨主</span>
            <span v-if="scope.row[item.field]=='2'">貨主/承運商</span>
          </span>
          <span v-else-if="item.field==='accountant'">{{ scope.row[item.field]==='1' ? '是' : '否' }}</span>
          <span v-else>{{ scope.row[item.field] }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="tableOption.label" min-width="200" align="center">
        <template slot-scope="scope">
          <el-button v-for="(item,i) in tableOption.options" :key="i" type="text" class="link-type" @click="handelBtn(item.methods,scope.row)">{{ item.label }}</el-button>
        </template>
      </el-table-column>
    </el-table>

使用：