vue如何循環渲染element-ui中table內容

對於大多數前端開發者來講，vuejs+element-ui是開發後臺管理系統過程當中必不可少的技術框架。然後臺管理系統中，最多見的形式就是表格和表單，以便用來增刪改查。

element-ui中table的使用

——當el-table元素中注入data對象數組後，在el-table-column中用prop屬性來對應對象中的鍵名便可填入數據，用label屬性來定義表格的列名。能夠使用width屬性來定義列寬。

至關因而要枚舉出全部須要展現的參數，這種狀況在參數比較少的狀況下是比較方便的，可是在有不少數據或者參數不肯定的狀況下，這種枚舉的方式就不太適合了。

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

循環渲染出element-ui中table表格內容

table表格分爲兩個部分，一部分值thead表頭，還有是tbody主體部分，因此能夠分別循環出來，看代碼：

<el-table
    :data="rightsDate"     <！-- 表格裏面的數據源 -->
      border
      stripe
      height="713"
>
      <el-table-column
          v-for="info in rightHeader" :key="info.key" 
<!-- 設置表頭數據源，並循環渲染出來，property對應列內容的字段名，詳情見下面的數據源格式 -->
          :property="info.key"
          :label="info.label"
         >
             <template slot-scope="scope">
                   {{scope.row[scope.column.property]}}  <!-- 渲染對應表格裏面的內容 --> </template>
          </el-table-column>
          <el-table-column label="啓用狀態">
                <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.ifUse"
                          :active-color="ACT_COLOR"
                          :inactive-color="INACT_COLOR">
                        </el-switch>
                  </template>
             </el-table-column>
</el-table>

模擬數據源展現：
rightHeader: [
        {
          label: '編碼',
          key: 'code'
        },
        {
          label: '姓名',
          key: 'name'
        },
        {
          label: '權限描述',
          key: 'description'
        }
      ],
rightsDate:[{
      "id":221,
      "code": "01",
      "name": "西藥開立權限",
      "description": "醫生對西藥處方權限",
      "ifUse":"0"
    }, {
      "id":222,
      "code": "02",
      "name": "草藥開立權限",
      "description": "醫生對草藥處方權限",
      "ifUse":"0"
    }, {
      "id":223,
      "code": "03",
      "name": "成藥開立權限",
      "description": "醫生對成藥處方權限",
      "ifUse":"0"
    }, {
      "id":224,
      "code": "04",
      "name": "麻醉開立權限",
      "description": "醫生對麻醉處方權限",
      "ifUse":"0"
    },
    {
      "id":225,
      "code": "05",
      "name": "精一開立權限",
      "description": "醫生對精一處方權限",
      "ifUse":"0"
    }
  ]

展現結果：