iView - daniel-qa/Vue GitHub Wiki

iView

for vue2

iView 訊息通知

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

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

Table

<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** ⚠️