当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
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>2、循环渲染出element-ui中table表格内容，下面展示一些 内联代码片。
able表格分为两个部分，一部分值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>下面JS代码展示一些。
模拟数据源展示：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"
}
]展示结果：
3、如果是<tr><td>遍历表格
这个组件实现了简单的增删功能，主要是对data数据的修改，vue是对data数据进行操作，数据双向绑定，数据改变则视图改变，同样视图改变则数据改变。
<template>
<div style="padding:20px;" id="app">
<div class="panel panel-primary">
<div class="panel-heading">用户管理</div>
<table class="table table-bordered table-striped text-center">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>年龄</th>
<th>毕业学校</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for ="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.school}}</td>
<td><button v-on:click="remove(index)">remove</button></td>
</tr>
<tr>
<td></td>
<td><input type="text" id="name" v-model="user.name"/></td>
<td><input type="text" id="age"v-model="user.age"/></td>
<td><input type="text" id="school"v-model="user.school"/></td>
<td><button @click="insert">insert</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
user: {'name': '', 'age': '', 'school': ''},
users: [
{'name': '李磊', 'age': '25', 'school': '洛阳理工'},
{'name': '张成', 'age': '23', 'school': '桂林电子科技'},
{'name': '炼心', 'age': '22', 'school': '江西电子科技'}
]
}
},
methods: {
insert: function () {
this.users.push(this.user)
},
remove: function (index) {
this.users.splice(index, 1)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
tr,th{
text-align:center;
}
</style>结果如下：
5、还有一种遍历数据的方式，标题固定的
html：
<el-table
:data="dt1"
:border="true"
size="mini"
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
>
<el-table-column
:prop="item.porp"
:label="item.label"
center
v-for="item in data"
:key="item.key"
min-width="70"
></el-table-column>
</el-table>其中：dt1为后台数据，data为表头。
js：
data: [
{ label: "年度", porp: "syear" },
{ label: "一月", porp: "icMonth1" },
{ label: "二月", porp: "icMonth2" },
{ label: "三月", porp: "icMonth3" },
{ label: "第一季度", porp: "icQuarter1" },
{ label: "四月", porp: "icMonth4" },
{ label: "五月", porp: "icMonth5" },
{ label: "六月", porp: "icMonth6" },
{ label: "第二季度", porp: "icQuarter2" },
{ label: "七月", porp: "icMonth7" },
{ label: "八月", porp: "icMonth8" },
{ label: "九月", porp: "icMonth9" },
{ label: "第三季度", porp: "icQuarter3" },
{ label: "十月", porp: "icMonth10" },
{ label: "十一月", porp: "icMonth11" },
{ label: "十二月", porp: "icMonth12" },
{ label: "第四季度", porp: "icQuarter4" },
],dt1和dt2是根据数据中icType的值取出想用的数据
getList(){
this.queryparam.userId = this.$store.state.user.userid;
if (this.queryparam.userId != null) {
listPersonIncome(this.queryparam).then((response) => {
this.personIncomeList = response.rows;
this.getTypeData();
});
}
},
async getTypeData() {
await this.personIncomeList.forEach((d) => {
if (d.icType == "1") {
this.dt1.push(d);
} else if (d.icType == "2") {
this.dt2.push(d);
} else {
this.dt3.push(d);
}
});
},运行结果：（后台只有两条数据）
