美文网首页前端
element-ui中el-table组件的行号

element-ui中el-table组件的行号

作者: 铁匠简记 | 来源:发表于2019-03-26 15:22 被阅读661次

场景:列表的第一列为序号,为保护数据信息,防止恶意爬虫,不能把后端给的id直接显示想到这里;
解决:通过动态绑定属性 row-class-name 。
templete:

<el-table :data="tableData3" height="550" style="width: 100%;background: transparent" @row-click="device_detail" :row-class-name="rowClassName">
    <el-table-column prop="id" label="序号" width="180"></el-table-column>
</el-table>

script:

rowClassName({row, rowIndex}) {
    //把每一行的索引放进row.id
    row.id = rowIndex+1;
}

效果:

效果图
很多人第一反应想到的是row-click方法,一般情况下row-click方法只能获取该行数据;
用row-class-name给每一行都加上行号index。

相关文章

网友评论

    本文标题:element-ui中el-table组件的行号

    本文链接:https://www.haomeiwen.com/subject/tbbgvqtx.html