Vue3 + Element Plus はパブリック フォーム コンポーネントをカプセル化します (ソース コード付き)

プログラミング 2023-06-05 13:10:42 訪問数: null

記事ディレクトリ

1 はじめに

プロジェクト内にはリストデータを表示するメニューが多いため、コードの繰り返しを避けるため、Element PlusのTableフォームをカプセル化し、設定によりリストデータの表示を実現しています。

2つの機能

ここに画像の説明を挿入

  1. テーブルデータの自動取得をサポート
  2. データ列構成とスロットをサポート
  3. サポート操作列の構成とスロット
  4. 複数選択ボックス構成のサポート
  5. テーブルテール構成とスロットをサポート
  6. ページング表示をサポート

3 実装手順

3.1 基本テーブルのコピー

Element Plus公式 Web サイトにアクセスして、最も単純なテーブル コードをコピーし、冗長なコードを削除します。

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="Date" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="state" label="State" />
    <el-table-column prop="city" label="City" />
    <el-table-column prop="address" label="Address" />
    <el-table-column prop="zip" label="Zip" />
    <el-table-column fixed="right" label="Operations">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">Detail</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office'
  }
]

const handleClick = () => {
  console.log('click')
}
</script>

3.2 フォームデータの自動取得をサポート

tableData データが props.api インターフェイスから取得されるように変更されました

ここに画像の説明を挿入

3.3 データ列構成とスロットをサポート

3.3.1 列を自動生成する

データ列 (複数選択ボックスと操作列を除く) は、props.columns を通じて自動的に生成されます。

ここに画像の説明を挿入

<el-table-column
  v-for="item in props.columns"
  :key="item.prop"
  :prop="item.prop"
  :label="item.label"
  :sortable="item.sortable ? 'custom' : false"
  :width="item.width"
>
</el-table-column>

interface TableConfigInterface {
    
    
  api: string // 表格数据获取接口
  columns: {
    
    
    // 显示列
    prop: string // 键名
    label?: string // 表头显示名称
    formatter?: (row: unknown) => string // 自定义单元格格式化方法，参数为当前行数据
    tooltip?: string // 表头 tooltip
    sortable?: boolean // 是否可以排序
    width?: number | string // 宽度
    style?: string // 单元格样式
    labelStyle?: string // 表头样式
  }[]
}

3.2.2 ヘッダーのカスタマイズとスロットのサポート

  • el-table-column はカスタムヘッダー<template #header>を使用します
  • <slot :name="item.prop + 'Header'">サポートスロット
  • labelStyle はスタイルのカスタマイズをサポートします
  • サポートツールチップ
<el-table-column
  v-for="item in props.columns"
  :key="item.prop"
  :prop="item.prop"
  :label="item.label"
  :sortable="item.sortable ? 'custom' : false"
  :width="item.width"
>
  <template #header>
    <slot :name="item.prop + 'Header'">
      <div class="inline-flex" :style="item.labelStyle">
        <span>{
   
   { item.label }}</span>
        <el-tooltip
          popper-class="table-tooltip"
          effect="dark"
          placement="top-start"
          :content="item.tooltip"
          v-if="item.tooltip"
        >
          <el-icon><i-ep-Warning /></el-icon>
        </el-tooltip>
      </div>
    </slot>
  </template>
</el-table-column>

3.2.3 セルのカスタマイズとスロットのサポート

  • el-table-column は<template #default="scope">カスタム
  • <slot :name="item.prop" :row="scope.row">サポートスロット
  • style 属性はカスタム スタイルをサポートします
  • フォーマッタ メソッドはカスタム表示コンテンツをサポートします
<el-table-column
  v-for="item in props.columns"
  :key="item.prop"
  :prop="item.prop"
  :label="item.label"
  :sortable="item.sortable ? 'custom' : false"
  :width="item.width"
>
  <template #header>
    <slot :name="item.prop + 'Header'">
      <div class="inline-flex" :style="item.labelStyle">
        <span>{
   
   { item.label }}</span>
        <el-tooltip
          popper-class="table-tooltip"
          effect="dark"
          placement="top-start"
          :content="item.tooltip"
          v-if="item.tooltip"
        >
          <el-icon><i-ep-Warning /></el-icon>
        </el-tooltip>
      </div>
    </slot>
  </template>
  <template #default="scope">
    <slot :name="item.prop" :row="scope.row">
      <div :style="item.style">
        <span v-if="item.formatter">{
   
   { item.formatter(scope.row) }}</span>
        <span v-else>{
   
   { scope.row[item.prop] }}</span>
      </div>
    </slot>
  </template>
</el-table-column>

3.3 サポート操作列の構成とスロット

  • el-table-column は<template #default="scope">カスタム
  • <slot :name="item.prop" :row="scope.row">サポートスロット
  • Visual メソッドはカスタム ボタン表示ロジックをサポートします
<el-table-column
  fixed="right"
  label="操作"
  :width="props.operation?.width"
  v-if="props.operation?.columns"
>
  <template #default="scope">
    <slot name="operations" :row="scope.row">
      <span v-for="item in props.operation?.columns" :key="item.text || item.icon">
        <el-button
          v-if="setVisible(scope.row, item.visible)"
          :type="item.type"
          :link="item.link"
          :plain="item.plain"
          @click="item.click(scope.row)"
          size="small"
          class="margin-right: 4px"
        >
          <el-icon v-if="item.icon" :class="item.icon"></el-icon>
          {
   
   { item.text }}
        </el-button>
      </span>
    </slot>
  </template>
</el-table-column>

// 操作框逻辑
const setVisible = (row: unknown, visible?: (row: unknown) => boolean) => {
    
    
  if (!visible || visible(row)) {
    
    
    return true
  }
  return false
}

3.4 複数選択ボックス構成のサポート

<el-table>選択列を追加

<el-table-column fixed :selectable="setSelectable" type="selection" v-if="showSelectBox" />

TableConfigInterface に rowKey と selectable を追加

interface TableConfigInterface {
    
    
  // ......
  rowKey?: string // 行数据的 Key
  selectable?: boolean | ((row: unknown) => boolean) // 当前行多选框是否可以勾选，参数为当前行数据，默认为 false
} 

const props = withDefaults(defineProps<TableConfigInterface>(), {
    
    
  rowKey: 'id',
})

// 多选框逻辑
const disabledList = reactive<string[]>([]) // 禁止勾选的数据
const showSelectBox = computed(() => props.selectable && disabledList.length < tableData.length)
const setSelectable = (row: unknown) => {
    
    
  const selectable =
    typeof props.selectable === 'boolean' ? props.selectable : props.selectable?.(row)
  if (!selectable && !disabledList.includes(row?.[props.rowKey])) {
    
    
    disabledList.push(row?.[props.rowKey])
  }
  return selectable
}

3.5 テーブルテール構成とスロットをサポート

  • <el-table>@selection-change と ref 設定を追加します
  • <slot name="footer">サポートスロット
  • Visual メソッドはカスタム ボタン表示ロジックをサポートします
<el-table
  v-loading="loading"
  :data="tableData"
  @selection-change="handleSelectionChange"
  table-layout="auto"
  ref="tableRef"
>
  <!-- ...... -->
</el-table>
<div v-if="showSelectBox" class="p-14">
  <el-checkbox
    v-model="isSelected"
    @click="tableRef?.toggleAllSelection()"
    :indeterminate="indeterminate"
    label="全选"
    style="vertical-align: middle; margin-right: 10px"
  />
  <slot name="footer" :rows="selectionRows">
    <span v-for="item in props.footer?.operations" :key="item.text || item.icon">
      <el-button
        v-if="item.visible ? item.visible() : true"
        :type="item.type || 'primary'"
        :link="item.link"
        :plain="item.plain"
        :disabled="!selectionRows.length"
        @click="item.click(selectionRows)"
        style="margin-left: 10px"
      >
        <el-icon v-if="item.icon" :class="item.icon"></el-icon>
        {
   
   { item.text }}
      </el-button>
    </span>
  </slot>
</div>

const tableRef = ref()
const isSelected = ref(false) // 是否有选中数据
const selectionRows = ref<unknown[]>([]) // 当前选中的数据
const handleSelectionChange = (rows: unknown[]) => {
    
    
  selectionRows.value = rows
  isSelected.value = rows.length > 0
}
const indeterminate = computed(
  () =>
    selectionRows.value.length > 0 &&
    selectionRows.value.length < tableData.length - disabledList.length
)

3.6 ページング表示のサポート

ボトムアップ<el-pagination></el-pagination>

<el-pagination
  background
  :total="tableData.length"
  :layout="props.layout"
  v-model:current-page="pagination.currentPage"
  v-model:page-size="pagination.pageSize"
  @current-change="getTableData"
  @size-change="getTableData"
  class="p-y-20"
>
</el-pagination>

interface TableConfigInterface {
    
    
  // ......
  layout?: string // 组件布局
} 

const pagination = ref({
    
    
  currentPage: 1,
  pageSize: 10
})

4 使用方法

<template>
  <TableComponent v-bind="tableConfig">
    <template #nameHeader>
      <div>姓名</div>
    </template>
    <template #name>
      <div>Yana</div>
    </template>
  </TableComponent>
</template>

<script setup lang="ts">
const tableConfig: TableConfigInterface = {
  api: 'getTableData',
  columns: [
    {
      prop: 'date',
      label: 'Date',
      tooltip: 'This is Date'
    },
    {
      prop: 'name',
      label: 'Name'
    },
    {
      prop: 'state',
      label: 'State'
    },
    {
      prop: 'city',
      label: 'City'
    },
    {
      prop: 'address',
      label: 'Address'
    },
    {
      prop: 'zip',
      label: 'Zip',
      style: 'color: red',
      labelStyle: 'color: red',
      sortable: true
    }
  ],
  operation: {
    columns: [
      {
        text: '编辑',
        click: () => {},
        visible: (row) => row.date === '2016-05-07'
      }
    ]
  },
  rowKey: 'date',
  selectable: (row) => row.date === '2016-05-07',
  footer: {
    operations: [
      {
        text: '删除',
        click: () => {}
      }
    ]
  }
}
</script>

5 ソースコード

<template>
  <div v-loading="loading" class="table-wrapper">
    <el-table
      :data="tableData"
      :max-height="props.maxHeight"
      :default-sort="props.defaultSort"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
      @row-click="goDetail"
      :row-style="{ cursor: 'pointer' }"
      table-layout="auto"
      ref="tableRef"
    >
      <el-table-column fixed :selectable="setSelectable" type="selection" v-if="showSelectBox" />
      <el-table-column
        v-for="item in props.columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :sortable="item.sortable ? 'custom' : false"
        :width="item.width"
      >
        <template #header>
          <slot name="header">
            <div class="inline-flex" :style="item.labelStyle">
              <span>{
   
   { item.label }}</span>
              <el-tooltip
                popper-class="table-tooltip"
                effect="dark"
                placement="top-start"
                :content="item.tooltip"
                v-if="item.tooltip"
              >
                <el-icon><i-ep-Warning /></el-icon>
              </el-tooltip>
            </div>
          </slot>
        </template>
        <template #default="scope">
          <slot :name="item.prop" :row="scope.row">
            <div :style="item.style">
              <span v-if="item.formatter">{
   
   { item.formatter(scope.row) }}</span>
              <span v-else>{
   
   { scope.row[item.prop] }}</span>
            </div>
          </slot>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        :width="props.operation?.width"
        v-if="props.operation?.columns"
      >
        <template #default="scope">
          <slot name="operations" :row="scope.row">
            <span v-for="item in props.operation?.columns" :key="item.text || item.icon">
              <el-button
                v-if="setVisible(scope.row, item.visible)"
                :type="item.type"
                :link="item.link"
                :plain="item.plain"
                @click="item.click(scope.row)"
                size="small"
                style="margin-right: 4px"
              >
                <el-icon v-if="item.icon" :class="item.icon"></el-icon>
                {
   
   { item.text }}
              </el-button>
            </span>
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="showSelectBox" class="p-14">
      <el-checkbox
        v-model="isSelected"
        @click="tableRef?.toggleAllSelection()"
        :indeterminate="indeterminate"
        label="全选"
        style="vertical-align: middle; margin-right: 10px"
      />
      <slot name="footer" :rows="selectionRows">
        <span v-for="item in props.footer?.operations" :key="item.text || item.icon">
          <el-button
            v-if="item.visible ? item.visible() : true"
            :type="item.type || 'primary'"
            :link="item.link"
            :plain="item.plain"
            :disabled="!selectionRows.length"
            @click="item.click(selectionRows)"
            style="margin-left: 10px"
          >
            <el-icon v-if="item.icon" :class="item.icon"></el-icon>
            {
   
   { item.text }}
          </el-button>
        </span>
      </slot>
    </div>
  </div>
  <el-pagination
    background
    :total="tableData.length"
    :layout="props.layout"
    v-model:current-page="pagination.currentPage"
    v-model:page-size="pagination.pageSize"
    @current-change="getTableData"
    @size-change="getTableData"
    class="p-y-20"
  />
</template>

<script lang="ts" setup>
interface OperationInterface {
  click: (row: unknown) => void // 按钮点击方法，参数为当前行数据
  text?: string // 按钮显示文字
  icon?: string // 按钮 icon
  visible?: (row?: unknown) => boolean // 设置按钮是否可见，参数为当前行数据，默认为 true
  type?: string // 按钮类型['primary'| 'success'| 'warning'| 'danger'| 'info']
  link?: boolean // 是否为链接按钮
  plain?: boolean // 是否为朴素按钮
}
interface TableConfigInterface {
  api: string // 表格数据获取接口
  rowKey?: string // 行数据的 Key
  columns: {
    // 显示列
    prop: string // 键名
    label?: string // 表头显示名称
    formatter?: (row: unknown) => string // 自定义单元格格式化方法，参数为当前行数据
    tooltip?: string // 表头 tooltip
    sortable?: boolean // 是否可以排序
    width?: number | string // 宽度
    style?: string // 单元格样式
    labelStyle?: string // 表头样式
  }[]
  selectable?: boolean | ((row: unknown) => boolean) // 当前行多选框是否可以勾选，参数为当前行数据，默认为 false
  operation?: {
    // 操作列
    columns: OperationInterface[]
    width?: number | string // 宽度
  }
  footer?: {
    // 操作列
    operations: OperationInterface[]
  }
  defaultSort?: {
    // 默认排序
    prop: string // 默认排序的列
    order?: string // ['ascending'| 'descending'], 没有指定 order, 则默认顺序是 ascending
  }
  maxHeight?: number | string // 表格最大高度
  layout?: string
}

const props = withDefaults(defineProps<TableConfigInterface>(), {
  rowKey: 'id',
  layout: 'prev, pager, next, total'
})
const pagination = ref({
  currentPage: 1,
  pageSize: 10
})
const tableRef = ref()
let tableData = reactive<unknown[]>([])

// 多选框逻辑
const isSelected = ref(false) // 是否有选中数据
const selectionRows = ref<unknown[]>([]) // 当前选中的数据
const handleSelectionChange = (rows: unknown[]) => {
  selectionRows.value = rows
  isSelected.value = rows.length > 0
}
const disabledList = reactive<string[]>([]) // 禁止勾选的数据
const setSelectable = (row: unknown) => {
  const selectable =
    typeof props.selectable === 'boolean' ? props.selectable : props.selectable?.(row)
  if (!selectable && !disabledList.includes(row?.[props.rowKey])) {
    disabledList.push(row?.[props.rowKey])
  }
  return selectable
}
const indeterminate = computed(
  () =>
    selectionRows.value.length > 0 &&
    selectionRows.value.length < tableData.length - disabledList.length
)
const showSelectBox = computed(() => props.selectable && disabledList.length < tableData.length)

// 操作框逻辑
const showOperation = ref(false)
const setVisible = (row: unknown, visible?: (row: unknown) => boolean) => {
  if (!visible || visible(row)) {
    showOperation.value = true
    return true
  }
  return false
}

// 排序
const handleSortChange = (data: { prop: string; order: string | null }) => {
  const { prop, order } = data
  console.log(prop, order)
  // getTableData
}

// 跳转详情页
const goDetail = (row: unknown) => {
  console.log(row)
}

// 发送接口
const loading = ref(true)
const getTableData = () => {
  loading.value = true
  showOperation.value = false
  tableData = [
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-05',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-06',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-07',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-08',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-09',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-10',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    },
    {
      date: '2016-05-11',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    }
  ]
  loading.value = false
}
getTableData()
</script>

<style lang="scss" scoped>
.table-wrapper {
  border-top: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
}
.inline-flex {
  display: inline-flex;
  align-items: center;
}
.p-14 {
  border-bottom: 1px solid #eaeaea;
  padding: 14px;
}
.p-y-20 {
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
}
</style>

<style lang="scss">
.table-tooltip {
  max-width: 220px;
}
</style>

おすすめ

転載: blog.csdn.net/weixin_36757282/article/details/130523672
おすすめ
GitHub のホットリストに急上昇 — オープンソースのプログラミング言語とフレームワークは、どうしてこんなにも魅力的なのでしょうか?
北京ヒューマノイドロボットイノベーションセンターが、擬人化走行用の純粋な電気駆動を備えた世界初のフルサイズヒューマノイドロボット「Tiangong」を発売
ランキング
アリクラウドサーバ_ubuntu ECSシステムディスク拡張システム_
ボタンをクリックしてクリップボードにコピーします
脅威ハンティングを使用してサイバー セキュリティを強化する
ライン画像やコンテナnginxのの建設
Python での try の使用について書く
リアルタイムのデータウェアハウスを構築する方法高速データ時代、MySQLのAnalyticDBはあなたを教えて
Docker でのネットワークおよびデータ管理 (Docker Swarm クラスターおよび Docker データ管理を含む)
Java ループの比較: 従来の for ループ、拡張された for ループ、および forEach ループ
浙江大学版「C言語プログラミング（第3版）」演習2-18
Gestion du temps RTOS - Utilisation de la fonction de crochet SysTick pour réaliser l'échantillonnage de synchronisation et les sous-sections de ce chapitre
アーカイブ
もっと
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

コードワールド

© 2018 codetd.com