table用法 - daniel-qa/Vue GitHub Wiki

table用法

Table寬度滿版設定

表頭保留空白 (renderHeader)

如果你真的不想渲染任何表頭內容，也不想顯示符號或空白區塊，應該這樣寫：

{
  slot: 'picture',
  width: 70,
  align: 'center',
  key: 'picture',
  renderHeader: () => ''
}

這樣可以 完全控制表頭渲染邏輯，避免 UI 框架偷偷幫你補上內容。

:min="0" 的功能

限制使用者輸入的最小值為 0，並且防止數字之外的值被輸入

插槽的使用方法

<template #spaceShare="{ row, index }">
  第 {{ index + 1 }} 行：{{ row.spaceUsed }} GB
</template>

row 代表的是每一筆紀錄

  <!---手動輸入空間欄位-->
  <template slot-scope="{ row }" slot="spaceShare">
    <InputNumber :min="0" placeholder="-" v-model="row.size" @on-change="handleSetSpace($event,row)" /> GB
  </template>
</Table>

名單，鉤選的功能

名單勾選功能的實現是通過 Vue 組件和事件機制來完成的。讓我詳細解釋這個流程：

  • 在 TeacherList.vue 中的實現

1 . 表格勾選功能：

<Table stripe ref="selection" :columns="tableColumns" :data="tableDataShow" @on-selection-change="selectTeachers" :height="380">

使用 View Design (iView) 的 Table 組件

:columns="tableColumns" 定義表格列，其中包含 type: 'selection' 的列來啟用勾選功能

@on-selection-change="selectTeachers" 監聽勾選變更事件

2 表格列定義：

tableColumns() {
  return [
    {
      type: 'selection',
      width: 60,
      align: 'center'
    },
    // 其他列定義...
  ]
}
type: 'selection' 創建勾選框列

3 勾選事件處理：

selectTeachers(selections) {
  this.selectedTeachers = selections
  this.$emit('on-selection-change', selections)
}

將勾選的教師保存到 selectedTeachers 陣列中，觸發 on-selection-change 事件，將勾選資料傳遞給父組件

在組件的 data 選項中定義 selectedTeachers

selectedTeachers: [],      // 左側已選的教師
rightSelectedTeachers: [], // 右側已選教師

4 已選教師顯示：

  <Tag v-for="teacher in selectedTeachers" :key="teacher.id" closable @on-close="removeSelectedTeacher(teacher)">
    {{getNameText(teacher)}}
  </Tag>
</div>

使用 Tag 組件顯示已選教師,支援點擊關閉按鈕移除已選教師

⚠️ **GitHub.com Fallback** ⚠️