1. 程式人生 > 實用技巧 >element ui 表格中的插槽用法

element ui 表格中的插槽用法

在elementui中的表格,只需要在最外層繫結data資料,繫結的資料中的欄位直接在內部用prop屬性來展示,如下程式碼紅色部分:

  <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>

data資料如下:與上面欄位對應

  <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>