el-table表格組件中插槽scope.row如何使用

el-table表格組件中插槽scope.row如何使用

1. 引言

在前端開發中，表格是展示數據的重要組件之一。Element UI 是一個基于 Vue.js 的組件庫，提供了豐富的 UI 組件，其中 el-table 是一個非常強大的表格組件。el-table 不僅支持基本的數據展示，還支持自定義列、排序、篩選、分頁等功能。在自定義列時，scope.row 是一個非常重要的概念，它允許我們在表格的每一行中插入自定義內容。

本文將詳細介紹 el-table 表格組件中插槽 scope.row 的使用方法，包括基本用法、高級用法以及常見問題的解決方案。

2. el-table 基本用法

在開始介紹 scope.row 之前，我們先回顧一下 el-table 的基本用法。

2.1 基本表格

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }
      ]
    }
  }
}
</script>

在這個例子中，我們定義了一個簡單的表格，表格的數據通過 tableData 數組傳入，每一列通過 el-table-column 組件定義，prop 屬性指定了數據對象的屬性名，label 屬性指定了列名。

2.2 自定義列內容

有時候我們需要在表格中展示一些復雜的內容，比如按鈕、圖標、圖片等。這時就需要使用 el-table-column 的插槽功能。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">編輯</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    }
  }
}
</script>

在這個例子中，我們在最后一列中添加了兩個按鈕，點擊按鈕時會觸發 handleClick 方法，并將當前行的數據 scope.row 作為參數傳入。

3. scope.row 的詳細用法

3.1 scope.row 的基本概念

在 el-table-column 中，slot-scope 是一個特殊的插槽屬性，它允許我們訪問當前行的數據。scope.row 就是當前行的數據對象。

<template slot-scope="scope">
  <span>{{ scope.row.name }}</span>
</template>

在這個例子中，scope.row 就是當前行的數據對象，我們可以通過 scope.row.name 訪問當前行的 name 屬性。

3.2 使用 scope.row 自定義列內容

我們可以通過 scope.row 自定義列的內容，比如展示圖片、按鈕、圖標等。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="頭像">
      <template slot-scope="scope">
        <img :src="scope.row.avatar" alt="頭像" style="width: 50px; height: 50px;">
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">編輯</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄',
          avatar: 'https://via.placeholder.com/50'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄',
          avatar: 'https://via.placeholder.com/50'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄',
          avatar: 'https://via.placeholder.com/50'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄',
          avatar: 'https://via.placeholder.com/50'
        }
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    }
  }
}
</script>

在這個例子中，我們在表格中添加了一列“頭像”，并通過 scope.row.avatar 展示了每一行的頭像圖片。

3.3 使用 scope.row 進行條件渲染

我們還可以根據 scope.row 的值進行條件渲染，比如根據不同的狀態展示不同的圖標或顏色。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="狀態">
      <template slot-scope="scope">
        <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'">
          {{ scope.row.status }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄',
          status: 'success'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄',
          status: 'danger'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄',
          status: 'success'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄',
          status: 'danger'
        }
      ]
    }
  }
}
</script>

在這個例子中，我們根據 scope.row.status 的值動態設置了 el-tag 的 type 屬性，從而實現了不同狀態的標簽展示。

3.4 使用 scope.row 進行復雜操作

有時候我們需要在表格中進行一些復雜的操作，比如根據當前行的數據進行計算、調用接口等。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button @click="handleDelete(scope.row)" type="text" size="small">刪除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    handleDelete(row) {
      this.$confirm('此操作將永久刪除該文件, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '刪除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消刪除'
        })
      })
    }
  }
}
</script>

在這個例子中，我們在操作列中添加了兩個按鈕，分別用于查看和刪除當前行的數據。點擊刪除按鈕時，會彈出一個確認框，用戶確認后執行刪除操作。

4. 常見問題與解決方案

4.1 scope.row 無法訪問到數據

有時候我們會遇到 scope.row 無法訪問到數據的情況，這通常是因為 el-table 的數據源 data 沒有正確傳入，或者 el-table-column 的 prop 屬性沒有正確設置。

解決方案：

• 確保 el-table 的 data 屬性正確傳入了一個數組。
• 確保 el-table-column 的 prop 屬性與數據對象的屬性名一致。

4.2 scope.row 中的數據無法實時更新

有時候我們會發現 scope.row 中的數據無法實時更新，這通常是因為 Vue 的響應式系統沒有檢測到數據的變化。

解決方案：

• 確保數據是通過 Vue 的響應式系統進行更新的，比如使用 this.$set 或者直接修改數組的引用。

4.3 scope.row 中的數據格式不正確

有時候我們會發現 scope.row 中的數據格式不正確，比如日期格式、數字格式等。

解決方案：

• 在 scope.row 中使用過濾器或者計算屬性對數據進行格式化。

<template slot-scope="scope">
  <span>{{ scope.row.date | formatDate }}</span>
</template>

filters: {
  formatDate(value) {
    return new Date(value).toLocaleDateString()
  }
}

5. 總結

el-table 是一個非常強大的表格組件，scope.row 是我們在自定義列內容時的重要工具。通過 scope.row，我們可以輕松地訪問當前行的數據，并根據需要進行自定義渲染、條件渲染、復雜操作等。

在實際開發中，我們可能會遇到一些問題，比如 scope.row 無法訪問到數據、數據無法實時更新、數據格式不正確等。通過本文的介紹，相信大家已經掌握了這些問題的解決方案。

希望本文能夠幫助大家更好地理解和使用 el-table 表格組件中的 scope.row 插槽。