当el-table
元素中注入data
对象数组后,在el-table-column
中用prop
属性来对应对象中的键名即可填入数据,用label
属性来定义表格的列名。可以使用width
属性来定义列宽。
<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>
默认情况下,Table 组件是不具有竖直方向的边框的,如果需要,可以使用border
属性,它接受一个Boolean
,设置为true
即可启用。
获取当前行数据
表格中的数据是已经显示过的,要想拿到当前表格中指定行数的数据时,则需要在template
标签中添加这个属性即可slot-scope=“scope,
同时写出一个点击事件的方法如编辑按钮,其中 scope.row
就是拿到当前行的所有数据,如果要想拿到指定数据,则需要指定你当前行指定需要的数据的字段就好,如:scope.row.musicId
<el-table-column label="操作" align="center" min-width="100"> <template slot-scope="scope"> <el-button type="primary" @click="edit(scope.row)">编辑</el-button> </template> </el-table-column>
格式化formatter
用来格式化内容。默认参数 Function(row, column, cellValue, index),案例:后端返回1、0,前端显示为是、否
<el-table-column :formatter="envFormatter" label="小程序环境" prop="env" width="120"/> methods: { envFormatter(row) { switch (row.env) { case 'pro': return '线上' case 'qa': return '测试' } }, }
标签:表格,element,ui,scope,table,属性,数据,row From: https://www.cnblogs.com/yjh1995/p/17657213.html