iView - daniel-qa/Vue GitHub Wiki

iView

for vue2

Tooltip

<Tooltip>
  <!-- 這裡是觸發 Tooltip 的區塊，也就是“表格中會看到的內容” -->
  <span class="product-name">HiTeach 配額授權管理 (1)</span>

  <!-- 這裡才是 Tooltip 彈出來的內容 -->
  <div slot="content">我是 Tooltip 的內容</div>
</Tooltip>

Vue 渲染這個元件時，會把 < span class="product-name">... 放在 DOM 中，

而 < div slot="content"> 是 Tooltip 彈出的內容，預設隱藏，只有觸發時才顯示。

:transfer="true"

這是 View UI（原 iView）中的 Tooltip 等彈出元件 提供的一個屬性，用來控制 是否將該元件的內容渲染到 < body> 外層。

  • 中文解釋：

transfer（傳送）：字面意思是「把內容傳送走」。

:transfer="true" 的意思是：

將這個 Tooltip 元件的 DOM 節點，從原來的父層 DOM 結構中「搬出來」，掛到整個頁面的 下方。

這樣就可以避開父層設定的 overflow: hidden、position: relative 等限制，讓 Tooltip 不會被遮或切斷。

Radion Button

<template>
    <RadioGroup v-model="animal">
        <Radio label="金斑蝶"></Radio>
        <Radio label="爪哇犀牛"></Radio>
        <Radio label="印度黑羚"></Radio>
    </RadioGroup>
</template>
<script>
    export default {
        data () {
            return {
                phone: 'apple',
                animal: '爪哇犀牛'
            }
        }
    }
</script>

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