vue如何循環(huán)渲染element-ui中table內(nèi)容
對(duì)于大多數(shù)前端開發(fā)者來(lái)說(shuō)，vuejs+element-ui是開發(fā)后臺(tái)管理系統(tǒng)過(guò)程中必不可少的技術(shù)框架。而后臺(tái)管理系統(tǒng)中，最常見的形式就是表格和表單，以便用來(lái)增刪改查。
element-ui中table的使用
——當(dāng)el-table元素中注入data對(duì)象數(shù)組后，在el-table-column中用prop屬性來(lái)對(duì)應(yīng)對(duì)象中的鍵名即可填入數(shù)據(jù)，用label屬性來(lái)定義表格的列名。可以使用width屬性來(lái)定義列寬。
相當(dāng)于是要枚舉出所有需要展示的參數(shù)，這種情況在參數(shù)比較少的情況下是比較方便的，但是在有很多數(shù)據(jù)或者參數(shù)不確定的情況下，這種枚舉的方式就不太適合了。
? ?
? ? ? :data="tableData"? ? ? style="width: 100%">? ? ?
? ? ? ? prop="date"? ? ? ? label="日期"? ? ? ? width="180">? ? ? ? ? ?
? ? ? ? prop="name"? ? ? ? label="姓名"? ? ? ? width="180">? ? ? ? ? ?
? ? ? ? prop="address"? ? ? ? label="地址">? ? ? ? ? ?
循環(huán)渲染出element-ui中table表格內(nèi)容
table表格分為兩個(gè)部分，一部分值thead表頭，還有是tbody主體部分，所以可以分別循環(huán)出來(lái)，看代碼：
<el-table
? ? :data="rightsDate"? ? <！-- 表格里面的數(shù)據(jù)源 -->
? ? ? border
? ? ? stripe
? ? ? height="713"
>
? ? ? <el-table-column
? ? ? ? ? v-for="info in rightHeader" :key="info.key"? ?
? ? ? ? ? :property="info.key"
? ? ? ? ? :label="info.label"
? ? ? ? >
? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? {{scope.row[scope.column.property]}}? <!-- 渲染對(duì)應(yīng)表格里面的內(nèi)容 -->
? ? ? ? ? ? ? </template>
? ? ? ? ? </el-table-column>
? ? ? ? ? <el-table-column label="啟用狀態(tài)">
? ? ? ? ? ? ? ? <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>
模擬數(shù)據(jù)源展示：
rightHeader: [? ? ? ? {? ? ? ? ? label:
'編碼',
? ? ? ? ? key: 'code'? ? ? ? },
? ? ? ? {
? ? ? ? ? label: '姓名',
? ? ? ? ? key: 'name'? ? ? ? },
? ? ? ? {
? ? ? ? ? label: '權(quán)限描述',
? ? ? ? ? key: 'description'? ? ? ? }
? ? ? ],
rightsDate:[{
? ? ? "id":221,
? ? ? "code": "01",
? ? ? "name": "西藥開立權(quán)限",
? ? ? "description": "醫(yī)生對(duì)西藥處方權(quán)限",
? ? ? "ifUse":"0"? ? }, {
? ? ? "id":222,
? ? ? "code": "02",
? ? ? "name": "草藥開立權(quán)限",
? ? ? "description": "醫(yī)生對(duì)草藥處方權(quán)限",
? ? ? "ifUse":"0"? ? }, {
? ? ? "id":223,
? ? ? "code": "03",
? ? ? "name": "成藥開立權(quán)限",
? ? ? "description": "醫(yī)生對(duì)成藥處方權(quán)限",
? ? ? "ifUse":"0"? ? }, {
? ? ? "id":224,
? ? ? "code": "04",
? ? ? "name": "麻醉開立權(quán)限",
? ? ? "description": "醫(yī)生對(duì)麻醉處方權(quán)限",
? ? ? "ifUse":"0"? ? },
? ? {
? ? ? "id":225,
? ? ? "code": "05",
? ? ? "name": "精一開立權(quán)限",
? ? ? "description": "醫(yī)生對(duì)精一處方權(quán)限",
? ? ? "ifUse":"0"? ? }
? ]
展示結(jié)果：
