說說如何使用 Element UI Table 的 slot-scope

在 Element UI Table 的官網上，有一個「篩選」功能，裏面能夠利用 slot-scope，給表格記錄打標籤。

關鍵代碼爲：

<template slot-scope="scope">
	<el-tag
	  :type="scope.row.tag === '家' ? 'primary' : 'success'"
	  disable-transitions>{{scope.row.tag}}</el-tag>
</template>
複製代碼

• 這裏首先利用 slot-scope 屬性（Vue 2.6.0 已廢棄）將子組件的數據（row.tag）傳遞給了父組件。
• 利用三元表達式爲 <el-tag> 標籤設定樣式。

實踐過程當中，發現這個三元表達式無法應用。由於實際業務場景，記錄類型確定不止兩個啊！

這時，就該條件渲染指令出場了：

<el-tag v-if="scope.row.state === '已完成'" :type="'success'"
	disable-transitions>{{scope.row.state}}
</el-tag>
<el-tag v-else-if="scope.row.state === '未開始'" :type="'danger'"
	disable-transitions>{{scope.row.state}}
</el-tag>
<el-tag v-else-if="scope.row.state === '進行中'" :type="'warning'"
	disable-transitions>{{scope.row.state}}
</el-tag>
複製代碼

運行結果：

---

官網只是基本用法，真正實踐仍是要靠積累與總結哦O(∩_∩)O哈哈~