iView - daniel-qa/Vue GitHub Wiki

iView

官方連結

for vue2 版本

iView 3.x → 套件名是 iview（Vue 2）。 iView 改名 → view-design 4.x（Vue 2）。

版本 view-design 4.7.0，屬於 Vue 2 的最後一代版本，算是相對穩定的。

Vue Dashboard 常見 Layout 模式

ES6 基本用法

Breakpoint（斷點）

簡單說就是「畫面寬度的分界線」 當視窗寬度跨過這條線時，版面就切換成不同的排版。

Select

Tabs

Tree

Button

Radio-group

Modal

Table

Icon

Tag

Input

Tooltip

iView 訊息通知

屬於 浮動式 toast / alert 訊息，會短暫顯示在畫面右上角或指定位置

this.$Message.info('資訊訊息');
this.$Message.success('成功訊息');
this.$Message.error('錯誤訊息');
this.$Message.warning('警告訊息');

Table

  • _disabled: true

當 iView Table 元件在渲染每一行 (row) 時，它會檢查綁定到這一行的那筆資料物件。

如果那筆資料物件含有 _disabled: true 這個屬性，那麼 Table 元件就會把這一行最前面的複選框 (checkbox) 渲染為禁用狀態。

所以，用「唯讀」來形容這個複選框的狀態是很貼切的：

  • 你看得到它 (通常會以灰化的外觀呈現)。

  • 你無法與它互動 (無法點擊勾選或取消勾選)。

這個機制是逐行獨立判斷的。這也意味著你可以只讓列表中的某幾行被禁用，只要為對應的資料物件加上 _disabled: true

即可。在我們的案例中，我們是為所有行都加上了這個屬性，從而達成了整個列表的勾選功能都被禁用的效果。

<Table border :columns="tableColumns" :data="tableData" @on-select="handleSelect"></Table>

:columns="tableColumns" 定義表格的列結構
:data="tableData" 提供表格數據
border 屬性添加邊框
@on-select 監聽選擇事件

這比使用原生 HTML table 要簡潔得多，如果用原生 HTML 實現相同功能，需要寫很多重複的標籤和處理邏輯。

  • code
<template>
  <div class="iview-test-container">
    <h2>iView 表格組件示例</h2>
    
    <div class="section">
      <h3>教師表格 (Table)</h3>
      <div class="demo-item">
        <Table border :columns="tableColumns" :data="tableData" @on-select="handleSelect"></Table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'iViewTest',
  data() {
    return {
      // 教師表格數據
      tableColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '照片',
          slot: 'picture',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('div', {
              style: {
                width: '40px',
                height: '40px',
                borderRadius: '50%',
                background: '#ccc',
                textAlign: 'center',
                lineHeight: '40px',
                color: '#fff'
              }
            }, params.row.name.substr(0, 1));
          }
        },
        {
          title: '姓名',
          key: 'name',
          sortable: true
        },
        {
          title: 'ID',
          key: 'id',
          width: 150
        },
        {
          title: '學科',
          key: 'subject',
          width: 150
        },
        {
          title: '分組',
          key: 'group',
          width: 150
        }
      ],
      tableData: [
        {
          id: 'T001',
          name: '王小明',
          subject: '數學',
          group: 'A組'
        },
        {
          id: 'T002',
          name: '張小剛',
          subject: '英文',
          group: 'B組'
        },
        {
          id: 'T003',
          name: '李小紅',
          subject: '科學',
          group: 'A組'
        },
        {
          id: 'T004',
          name: '陳大文',
          subject: '歷史',
          group: 'C組'
        }
      ]
    }
  },
  methods: {
    // 表格選擇事件
    handleSelect(selection, row) {
      console.log('已選擇:', selection);
    }
  }
}
</script>
  • render 說明
render: (h, params) => {
  return h('div', {
    style: {
      width: '40px',
      height: '40px',
      borderRadius: '50%',
      background: '#ccc',
      textAlign: 'center',
      lineHeight: '40px',
      color: '#fff'
    }
  }, params.row.name.substr(0, 1));
}

這個 render 的確就是回傳一個虛擬 DOM 物件，用來渲染畫面上的內容（在 Vue 2 的虛擬 DOM 系統裡）。這是動態自訂內容的一種寫法。

h 是 Vue 2 中的「createElement」函數（Hyperscript function）。

建立一個 div 元素，設定樣式為圓形、有背景色、置中對齊。

params.row.name.substr(0, 1) 取的是該列的名字的第一個字，顯示在圈圈裡。

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