フロントエンドはElement-uiセカンダリパッケージel-tableに基づいています

私自身の作品でカプセル化された el-table (ポケットベルと el-table テーブルを含む) が保存されます。

1. コンポーネントの内容

<template>
  <div class="question-table">
    <template>
      <el-table :data="allDate.items" style="width: 100%">
        <el-table-column v-if="isSerialShow" type="index" label="序号" />
        <el-table-column
          v-for="(item,index) in tableDetails"
          :key="index"
          :label="item.title"
          :prop="item.key"
        >
          <!-- 过滤时间、前台是否显示 -> 插槽-->
          <template slot-scope="{row}">
            <span>
              {
   
   {
                item.formatDate && item.formatDate(row.addDate)
                  ||item.isFrontShow && item.isFrontShow(row.isFrontDisplay)
                  ||item.stateNow && item.stateNow(row.state)
                  ||item.aa && item.aa(row.state)
                  || row[item.key]
              }}
            </span>
          </template>
          <!-- 过滤插槽-->
        </el-table-column>

        <el-table-column label="操作" width="300">
          <template slot-scope="{row}">
            <slot :row="row" />
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页器 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          :current-page="parseInt(allDate.page)"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="parseInt(allDate.pagesize)"
          layout="prev, pager, next,sizes, jumper"
          :total="parseInt(allDate.counts)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </template>
  </div>
</template>

<script>

export default {
  name: 'QuestionTable',
  components: {},
  props: {
    allDate: { // 所有数据信息
      type: Object,
      required: true
    },
    tableDetails: { // 表格的标题和字段
      type: Array,
      required: true
    },
    listPage: { // axios 发送的页码信息
      type: Object,
      required: true
    },
    pagesize: { // 获得以前的页大小，规避BUG
      type: Number,
      required: true
    },
    isSerialShow: { // 是否显示最左侧序号
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {},
  methods: {
    // 页码数量 改变
    handleSizeChange(pagesize) {
      this.$emit('update:listPage', {
        page: 1,
        pagesize: pagesize
      })
      this.$emit('updateList')
    },
    // 点击页码
    async handleCurrentChange(page) {
      this.$emit('update:listPage', {
        page: page,
        pagesize: this.pagesize
      })
      // 通知父组件刷新获取的数据
      this.$emit('updateList')
    }
  }
}
</script>
<style lang="scss">
.el-table th{
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8 !important
}
.el-pagination{
  margin-top: 20px;;
}
.el-button--text{
  font-size: 12px;
}
</style>

2. 親コンポーネントを使用する

<subject-table
  :all-date="allDate"
  :table-details="tableDetails"
  :list-page.sync="listPage"
  :pagesize="listPage.pagesize"
  @updateList="getSubjectList()"
>
  <template slot-scope="{row}">
       // row 中可以获取到 当前行的值
  </template>
</subject-table>

3. 各パラメータの送信フォーマットは以下と同じです。

1. allDate: すべてのデータ --> 必須

現在のテーブルが走査する必要がある配列、つまり、コンポーネントに渡す必要があるデータであり、コンポーネントの各列が走査するコンテンツの基本データです。

2. tableDetails: タイトルとクエリフィールド --> 必須

フォームのタイトルとフィールドは配列であり、2 つの必須属性とフィルタリングに使用されるフィルタが含まれています。

キー: フィールド

ページを表示するために使用される、先ほど渡されたallDataをトラバースした後、その中のフィールドのキー値を取得する必要があるel-tableであり、allDataで取得するデータのフィールドと一致しています。

タイトル: タイトル

これは各列のタイトル位置です。通常、これは UI に従って設定されますが、これは無効です。

フィルター：

import を使用してフィルターを導入し、フィルターされた値を返し、それを対応するオブジェクトに追加して、フィルターするサブコンポーネントのテンプレートに設定できます。

例: tableDetils のインスタンス形式

import { formatDate, isFrontShow } from '@/filters'

tableDetails: [
  {
    title: '学科名称',
    key: 'subjectName'
  },
  {
    title: '创建日期',
    key: 'addDate',
    formatDate:formatDate
  },
  {
    title: '前台是否显示',
    key: 'isFrontDisplay',
    isFrontShow: isFrontShow
  },
]

注: 必ずサブコンポーネントのテンプレートで定義してください。そうしないと機能しません。

3. listPage: axios によって送信されるページ番号情報 --> 必須

テーブルによってレンダリングされるフィールドの内容、通常は渡されたページ番号、現在のページ番号、現在表示されているページ数を取得します。

listPage の例:

listPage: { // 传递页码
  page: 1,
  pagesize: 10
}

list-page.sync を渡し、.sync 修飾子を追加する必要があります。そうしないと、ページめくりによって axiox リクエストが再送信されません。

4. pagesize: バックエンドによって返されたページ番号のみを渡します --> 渡す必要があります

通常、これは 3 番目のフィールド listPage で取得され、内部ロジックを再度渡す必要があります。

通常、配信コンテンツは listPage.pagesize です。

5. isSerialShow: シリアル番号 ---> オプション

最初の列にシリアル番号を表示するかどうかを制御するブール値を渡します (オプション)

6. @updateList メソッド --> 必須

ページ番号をクリックすると

ページ数が変わったとき

子コンポーネントは親コンポーネントの updateList メソッドをトリガーし、axiox リクエストを再送信して最新のデータを取得します。

更新されると、子コンポーネントの listPage が変更され、親コンポーネントが再度リクエストインターフェイスを呼び出し、最新の listPage を取得してデータを取得します。

フィールドの内容は、親コンポーネントと子コンポーネントを組み合わせて使用する必要があります。Element-ui + 子コンポーネントのコードを使用すると、理解しやすくなります。将来忘れないように内容を残しておきます。非常に便利です~

添付された el-table ドキュメントのアドレス: Element - 世界で最も人気のある Vue UI フレームワーク