iVew Table - daniel-qa/Vue GitHub Wiki

Colums定義
columns : 欄位定義（表頭、對應資料、顯示方式）
data : 實際資料來源（每一列 row）
< Table> : 負責把「columns × data」組合成表格

data 裡的每一筆資料，都要有包含 Colums 裡，定義的 key

第一個，就是對應的 key，這裡會是科目 ID

english: { count: 10, unit: '冊', status: '全冊' },  // 這個就是一格的內容，(Cell)

有 key：Table 幫你拿資料

沒 key：你自己在 render 裡拿

{
  title: '英文',
  render: (h, params) => params.row.english.status
}

title: 是表頭文字
key: 定義的是「這一欄對應 row 的哪個屬性」

data 裡的每一個物件，是一整列 row

columns 裡的 key，只是「選擇其中哪些欄位要顯示」

<Table stripe
	   :columns="shareListColumns"
	   :data="shareListData"
	   border
	   style="width: 100%;"
	   :row-class-name="() => 'share-list-row'">
</Table>

shareListColumns: [
{
  title: '學校名稱',
  key: 'schoolName',
  align: 'center',
  minWidth: 200,
  render: (h, params) => {
	return h('span', {
	  style: {
		fontWeight: 'bold'
	  }
	}, params.row.schoolName);
  }
},

shareListData: [
  {
    id: 1,
    schoolName: '西宁市明光小学',                           // 第一欄
    english: { count: 10, unit: '冊', status: '全冊' },
    math: { count: 15, unit: '冊', status: '全冊' },
    chinese: { count: 8, unit: '冊', status: '全冊' }
  },
  {
    id: 2,
    schoolName: '成都市盐道街小学',
    english: { count: 5, unit: '冊', status: '5冊' },
    math: { count: 0, unit: '冊', status: '全科' },
    chinese: { count: 6, unit: '冊', status: '6冊' }
  },

只要 data 裡「有足夠被 columns 用到的欄位」，Table 就能正常顯示；

多的資料完全沒關係，少的只會影響該欄顯示，不會讓 Table 壞掉。

不是「不行」，而是「顯示會是空或 undefined」。

欄寬

width: 固定寬度

minWidth: 最小寬度（比較常用）

columns: [
  {
    title: '姓名',
    key: 'name',
    width: 120
  },

寬度滿版

table width: 100% + 欄位 minWidth = 自動滿版

设置属性 stripe ，表格会间隔显示不同颜色，用于区分不同行数据。
改文字顏色 ( Cell)

render: (h, params) => {
  const value = params.row[subject.id]
  return h(
    'span',
    { style: { color: '#2d8cf0' } },
    value
  )
}

用 class

推薦：用 class（可維護性最好）
Column
render: (h, params) => {
  const value = params.row[subject.id]
  return h(
    'span',
    { class: 'table-subject-count' },
    value
  )
}

CSS
.table-subject-count {
  color: #2d8cf0;
  font-weight: 500;
}

Tooltip

render: (h, params) => {
	const value = params.row[subject.id];
	
	// Fake 冊別名稱列表
	const tooltipContent = `• 英語——一年級下學期\n• 英語——二年級上學期\n• 英語學習 A`;
	
	return h('Tooltip', {
	  props: {
		content: tooltipContent,
		placement: 'top-start',
		theme: 'light',
		maxWidth: 200,
		transfer: true
	  },
	  style: {
		zIndex: 9999
	  }
	}, [
	  h('span', {
		style: {
		  color: '#2d8cf0',
		  cursor: 'pointer'
		}
	  }, value)
	]);
}

新增「操作」的 Button

這裡是「編輯」，「刪除」

const actionColumn = {
  title: '操作',
  key: 'action',
  align: 'center',
  minWidth: 140,
  render: (h, params) => {
    return h('div', [
      h('Button', {
        props: {
          type: 'text',
          size: 'small'
        },
        style: { color: '#2d8cf0' },
        on: {
          click: () => this.handleEdit(params.row)
        }
      }, '編輯'),

      h('Button', {
        props: {
          type: 'text',
          size: 'small'
        },
        style: { color: '#ed4014' },
        on: {
          click: () => this.handleDelete(params.row)
        }
      }, '刪除')
    ])
  }
}

/* 處理編輯操作 */
handleEdit(row) {
	console.log('編輯學校:', row);
	// TODO: 實作編輯功能
	this.$Message.info(`編輯學校：${row.name}`);
},

/* 處理刪除操作 */
handleDelete(row) {
	this.$Modal.confirm({
		title: '確認刪除',
		content: `確定要刪除對 ${row.name} 的課綱分享嗎？`,
		onOk: () => {
			console.log('刪除學校:', row);
			// TODO: 實作刪除功能
			this.$Message.success(`已刪除對 ${row.name} 的分享`);
		}
	});
},

iVew Table - daniel-qa/Vue GitHub Wiki

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

⚠️ GitHub.com Fallback ⚠️