說(shuō)明：

• 資源管理講解數(shù)據(jù)展示巷波，數(shù)據(jù)分頁(yè)，數(shù)據(jù)篩選卸伞。添加抹镊，編輯，刪除荤傲，以及資源分類中的所有功能均與菜單管理功能類似垮耳，這里就不再多贅述了

整體布局

將資源列表設(shè)置為單獨(dú)組件（獨(dú)立于resource/index.vue）
創(chuàng)建目錄以及文件：
resource/components/list.vue

• 使用Card組件設(shè)置外部結(jié)構(gòu)
• 頭部使用Form組件的行內(nèi)表單形式與數(shù)據(jù)
• 內(nèi)容設(shè)置Table組件并且設(shè)置數(shù)據(jù)

// resource/components/list.vue，暫且設(shè)置為這個(gè)樣子
<template>
  <div class="resource-list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="審批人">
            <el-input v-model="formInline.user" placeholder="審批人"></el-input>
          </el-form-item>
          <el-form-item label="活動(dòng)區(qū)域">
            <el-select v-model="formInline.region" placeholder="活動(dòng)區(qū)域">
              <el-option label="區(qū)域一" value="shanghai"></el-option>
              <el-option label="區(qū)域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查詢</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ResourceList',
  data () {
    return {
      formInline: {},
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

在resource/index.vue導(dǎo)入

<template>
  <div class="resource">
    <resource-list></resource-list>
  </div>
</template>

<script>
import ResourceList from './components/list'
export default {
  name: 'ResourceIndex',
  components: {
    ResourceList
  }
}
</script>

<style lang="scss" scoped></style>

布局完畢

展示資源列表

使用的接口是按條件分頁(yè)查詢資源接口：接口地址
Postman 測(cè)試時(shí)注意遂黍，所有參數(shù)可選：

• 無(wú)參數(shù)時(shí)需要傳入空對(duì)象氨菇，這時(shí)響應(yīng)數(shù)據(jù)的data.records為第一頁(yè)的多余數(shù)據(jù)
• 傳入?yún)?shù)用于按條件篩選儡炼，如傳入name，或者url查蓉，這時(shí)響應(yīng)數(shù)據(jù)的data.records為篩選后的第一條
  • 接口支持模糊查詢乌询，例如傳入"url":"menu"，這時(shí)會(huì)響應(yīng)多條滿足條件的資料信息
    測(cè)試完畢之后豌研，就可以封裝接口到新模塊中啦

// services/resource.js
import request from '@/utils/request'

// 資源請(qǐng)求
export const getResourcePages = data => {
  return request({
    method: 'POST',
    url: '/boss/resource/getResourcePages',
    data
  })
}

引入調(diào)用

// resource/components/list.vue
...
<script>
// 引入
import { getResourcePages } from '@/services/resource.js'

export default {
  ...
  created () {
    // 調(diào)用
    this.loadResources()
  },
  methods: {
    ...
    async loadResources () {
      // 請(qǐng)求妹田，空對(duì)象必須傳入，否則參數(shù)不完整導(dǎo)致接口報(bào)錯(cuò)
      const { data } = await getResourcePages({})
      console.log(data)
    }
  }
}
</script>

成功之后將數(shù)據(jù)存儲(chǔ)到data.resourcs并且綁定到table組件中鹃共，要注意一點(diǎn)鬼佣，日期的格式需要使用過(guò)濾器進(jìn)行調(diào)整，詳細(xì)參考代碼：

<template>
  <div class="resource-list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="審批人">
            <el-input v-model="formInline.user" placeholder="審批人"></el-input>
          </el-form-item>
          <el-form-item label="活動(dòng)區(qū)域">
            <el-select v-model="formInline.region" placeholder="活動(dòng)區(qū)域">
              <el-option label="區(qū)域一" value="shanghai"></el-option>
              <el-option label="區(qū)域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查詢</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
        :data="resources"
        style="width: 100%">
          <el-table-column
          type="index"
          label="編號(hào)"
          width="100"
          ></el-table-column>
          <el-table-column
          prop="name"
          label="資源名稱">
          </el-table-column>
          <el-table-column
          prop="url"
          label="資源路徑">
          </el-table-column>
          <el-table-column
          prop="description"
          label="描述">
          </el-table-column>
          <!-- 過(guò)濾器需要使用作用于插槽獲取數(shù)據(jù)才能進(jìn)行功能處理 -->
          <el-table-column
          label="添加時(shí)間">
          <template slot-scope="scope">
              <span>{{ scope.row.createdTime | dateFormat }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="操作">
          <template slot-scope="scope">
              <el-button
              size="mini"
              @click="handleEdit(scope.row)"
              >編輯</el-button>
              <el-button
              size="mini"
              @click="handleDelete(scope.row)"
              type="danger"
              >刪除</el-button>
          </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getResourcePages } from '@/services/resource'
export default {
  name: 'ResourceList',
  data () {
    return {
      formInline: {},
      //   用于存儲(chǔ)資源列表數(shù)據(jù)
      resources: []
    }
  },
  created () {
    this.loadResources()
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    async loadResources () {
      const { data } = await getResourcePages({})
      if (data.code === '000000') {
        this.resources = data.data.records
      }
    },
    handleEdit () {
    },
    handleDelete () {
    }
  },
  filters: {
    // 日期過(guò)濾器
    dateFormat (date) {
      date = new Date(date)
      return `
      ${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}
      ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}
      `
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

table組件數(shù)據(jù)要使用過(guò)濾器霜浴，得需要通過(guò)自定義列模板方式設(shè)置插值表達(dá)式

分頁(yè)處理

分頁(yè)布局

使用Element的Pagination分頁(yè)組件->附加功能->完善功能設(shè)置晶衷，將結(jié)構(gòu)，方法阴孟，數(shù)據(jù)添加到list.vue中

// list.vue
<el-card class="box-card">
  ...
  <!-- 給 table 與 pagination 設(shè)置間距晌纫，看起來(lái)更美觀 -->
  <el-table
    :data="resources"
    style="width: 100%; margin-bottom: 20px;">
  ...
  <!-- 分頁(yè)功能 -->
  <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
  </el-pagination>
</el-card>
...
<script>
...
data () {
  return {
    ...
    currentPage1: 5,
    currentPage2: 5,
    currentPage3: 5,
    currentPage4: 4
  }
},
...
methods: {
  ...
  handleSizeChange (val) {
    console.log(`每頁(yè) ${val} 條`)
  },
  handleCurrentChange (val) {
    console.log(`當(dāng)前頁(yè): ${val}`)
  }
},
...
</script>

分頁(yè)功能

分頁(yè)功能的接口存在兩個(gè)比較重要的請(qǐng)求參數(shù)

• current（當(dāng)前頁(yè)數(shù)）
• size（每頁(yè)條數(shù)）
  由于分頁(yè)需要與篩選功能結(jié)合，所以將數(shù)據(jù)聲明到data.form
  • 更改了form的名稱之后永丝，注意將模板中的數(shù)據(jù)名稱同時(shí)修改（簡(jiǎn)單處理就可以了锹漱，后續(xù)還要設(shè)置功能）
  • 修改current時(shí)頁(yè)面會(huì)渲染不同頁(yè)的數(shù)據(jù)

// list.vue
data () {
  return {
    ...
    form: {
      ...
      // 當(dāng)前頁(yè)號(hào)，默認(rèn)為 1
      current: 1,
      // 每頁(yè)數(shù)據(jù)條數(shù)慕嚷，例如為10哥牍，按需設(shè)置
      size: 10
    },
    ...
  }
},
methods: {
    async loadResources () {
  // 將參數(shù)傳入請(qǐng)求
  const { data } = await getResourcePages({
    current: this.form.current,
    size: this.form.size
  })
  ...
},
}

分頁(yè)組件的頁(yè)面變化會(huì)觸發(fā)handleCurrentChange事件，參數(shù)為當(dāng)前頁(yè)號(hào)喝检，操作時(shí)請(qǐng)求當(dāng)前頁(yè)碼的數(shù)據(jù)即可

// list.vue
// 頁(yè)碼變化時(shí)觸發(fā)
handleCurrentChange (val) {
  // 將 val 同步給 current
  this.form.current = val
  // 請(qǐng)求更新數(shù)據(jù)
  this.loadResources()
}

注意：
這是我們發(fā)現(xiàn)頁(yè)碼按鈕個(gè)數(shù)為固定值嗅辣，應(yīng)該進(jìn)行設(shè)置，觀察組件的屬性

• current-page:當(dāng)前組件顯示頁(yè)碼
  • this.form.current會(huì)更新請(qǐng)求的數(shù)據(jù)頁(yè)碼為1挠说，而顯示頁(yè)碼需要通過(guò)當(dāng)前屬性控制
  • 文檔中說(shuō)明當(dāng)前屬性支持.sycn修飾符辩诞，
    設(shè)置:current-page.sync = "form.current"
    這樣一來(lái)之前事件中的this.form.current = val就可以不需要設(shè)置了，視圖操作導(dǎo)致屬性的改變會(huì)自動(dòng)同步到form.current中纺涤，反之亦然（與v-model有點(diǎn)類似）
• total為數(shù)據(jù)總數(shù)
• page-size為每頁(yè)大小译暂，應(yīng)該綁定到form.size
• page-sizes為左側(cè)設(shè)置每頁(yè)條數(shù)的下拉菜單，第一個(gè)值為初始值撩炊，不應(yīng)大于總條數(shù)外永，否則只會(huì)出現(xiàn)一頁(yè)，后續(xù)值自行按需設(shè)置

組件會(huì)根據(jù)上面的屬性自動(dòng)計(jì)算總頁(yè)數(shù)拧咳，現(xiàn)在只有total應(yīng)該通過(guò)請(qǐng)求獲取

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="form.current"
      :page-sizes="[10, 15, 20]"
      :page-size="form.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>

在請(qǐng)求數(shù)據(jù)的時(shí)候伯顶，接口響應(yīng)數(shù)據(jù)包含了total為總數(shù)據(jù)條數(shù)，保存到data中并在created中接收

• 數(shù)據(jù)中的currentPage1/2/3/4為文檔提供的數(shù)據(jù)，可以直接刪掉

data () {
  return {
    ...
    // 數(shù)據(jù)總條數(shù)
    totalCount: 0
  }
},
...
methods: {
  ...
  async loadResources () {
    ...
    if (data.code === '000000') {
      this.resources = data.data.records
      // 保存總條數(shù)
      this.totalCount = data.data.total
    }
  }
  ...
},

設(shè)置后頁(yè)碼可以切換了祭衩，但是更新每頁(yè)條數(shù)只更改了頁(yè)碼灶体，數(shù)據(jù)沒(méi)有更新，于是我們這個(gè)時(shí)候可以通過(guò)組件的size-change事件處理

• size-change會(huì)在每頁(yè)條數(shù)發(fā)生變化時(shí)觸發(fā)掐暮，參數(shù)為新的條數(shù)蝎抽，賦值給form.size
• 重置頁(yè)碼為1
• 更新數(shù)據(jù)

// 每頁(yè)顯示條數(shù)觸發(fā)事件
    handleSizeChange (val) {
      this.form.size = val
      // 由于修改了每一頁(yè)現(xiàn)實(shí)的條數(shù)，應(yīng)該歸零頁(yè)數(shù)
      this.form.current = 1
      this.loadResources()
    },

復(fù)雜但是也不是很難的分頁(yè)功能就搞定了路克。

篩選處理

篩選功能

data 中聲明數(shù)據(jù)樟结，更新模板綁定數(shù)據(jù)，資源分類功能需要請(qǐng)求接口操作

• 聲明的數(shù)據(jù)名稱需要根據(jù)接口請(qǐng)求參數(shù)設(shè)置精算，最后將form整體發(fā)送給接口
• 添加一個(gè)重置按鈕

form: {
  // 資源名稱
  name: '',
  // 資源路徑
  url: '',
  // 資源分類
  categoryId: ''
  ...
},

<el-form :inline="true" :model="form" class="demo-form-inline">
  <el-form-item label="資源名稱">
    <el-input v-model="form.name" placeholder="資源名稱"></el-input>
  </el-form-item>
  <el-form-item label="資源路徑">
    <el-input v-model="form.url" placeholder="資源路徑"></el-input>
  </el-form-item>
  <el-form-item label="資源分類">
    <el-select v-model="form.categoryId" placeholder="資源分類">
      <!-- 假數(shù)據(jù)瓢宦，需要請(qǐng)求 -->
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查詢搜索</el-button>
    <el-button>重置</el-button>
  </el-form-item>
</el-form>

查詢資源分類列表：接口

// 新建文件 services/resource-category.js
import request from '@/utils/request'

// 資源分類請(qǐng)求
export const getResourceCategory = () => {
  return request({
    method: 'GET',
    url: '/boss/resource/category/getAll'
  })
}

引入并且請(qǐng)求數(shù)據(jù)

...
import { getResourceCategory } from '@/services/resource-category.js'
...
created () {
  ...
  this.loadResourceCategory()
},
...  
data () {
  return {
    // 資源分類列表
    resourceCategories: [],
    ...
  }
},
methods: {
  async loadResourceCategory () {
    const { data } = await getResourceCategory()
    if (data.code === '000000') {
      this.resourceCategories = data.data
    }
  },
  ...

遍歷生成資源分類下拉菜單

<el-form-item label="資源分類">
  <el-select v-model="form.categoryId" placeholder="資源分類">
    <el-option
      :label="item.name"
      :value="item.id"
      v-for="item in resourceCategories"
      :key="item.id"
    ></el-option>
  </el-select>
</el-form-item>

提交時(shí)請(qǐng)求數(shù)據(jù)，同時(shí)更改頁(yè)數(shù)為1

onSubmit () {
  // 篩選提交灰羽，請(qǐng)求數(shù)據(jù) (將請(qǐng)求參數(shù)更改為整個(gè) form)
  this.form.current = 1
  this.loadResources()
},
...
async loadResources () {
  // 將參數(shù)傳入請(qǐng)求
  /* const { data } = await getResourcePages({
    current: this.form.current,
    size: this.form.size
  }) */
  const { data } = await getResourcePages(this.form)
  ...
},

清除功能

清除分為下拉菜單清除和統(tǒng)一清除（重置）
單個(gè)清除使用Element中select下拉框組件中的可清空單選功能

• 給下拉框組件設(shè)置clearable屬性就可以了

// list.vue
<el-select
  v-model="form.categoryId"
  placeholder="資源分類"
  clearable
>

表單重置操作需要清空表單

• 表單組件提供了resetFields()用于重置具有prop的表單項(xiàng)
• 表單需要設(shè)置ref
• 需要給表單項(xiàng)添加prop才能使用驮履，未設(shè)置prop的表單項(xiàng)不受重置影響

<el-form 
  :inline="true"
  :model="form"
  class="demo-form-inline"
  ref="form"
>
  <el-form-item label="資源名稱" prop="name">
    <el-input v-model="form.name" placeholder="資源名稱"></el-input>
  </el-form-item>
  <el-form-item label="資源路徑" prop="url">
    <el-input v-model="form.url" placeholder="資源路徑"></el-input>
  </el-form-item>
  <el-form-item label="資源分類" prop="categoryId">
...
<el-button
  @click="onReset"
>重置</el-button>
...
onReset () {
  this.$refs.form.resetFields()
},

這個(gè)方法可以將我們?cè)诓藛喂芾砟抢镞M(jìn)行粗暴的清空方式給替換掉了

數(shù)據(jù)加載細(xì)節(jié)處理

網(wǎng)速慢的時(shí)候，顯示加載中提示廉嚼，同時(shí)禁用所有操作
這個(gè)時(shí)候使用Element的Loading加載組件設(shè)置

• 通過(guò)指令v-loading控制玫镐，true表示加載中，false表示隱藏提示
• 按鈕與分頁(yè)組件的禁用屬性均為disabled

// list.vue
...
<el-button
  type="primary"
  @click="onSubmit"
  :disabled="isLoading"
>查詢搜索</el-button>
...
<el-table
  :data="resources"
  style="width: 100%; margin-bottom: 20px;"
  v-loading="isLoading"
>
<el-button
  @click="onReset"
  :disabled="isLoading"
>重置</el-button>
...
<el-pagination
  ...
  :disbled="isLoading">
</el-pagination>
...
<script>
  
data () {
  return {
    ...
    // 加載狀態(tài)
    isLoading: false
  }
},
...
async loadResources () {
  // 開(kāi)始加載數(shù)據(jù)
  this.isLoading = true
  ...
  // 請(qǐng)求完畢取消加載中狀態(tài)
  this.isLoading = false
},
</script>

資源的增刪改都是重復(fù)性的知識(shí)前鹅，通過(guò)element加接口都可以完成
接口文檔：接口