随着计算机,手机的普及,各种前端技术迭代也是疯狂更新。最近玩了玩vue框架,发现前端开发已经相当简单、快捷、高效并且效果还美观。今天记录一下遇到的一个问题。在动态生成el-table-column的时候,其它列值无法显示,
<el-table :data="tableData"
@cell-click="cellClick">
<el-table-column v-for="(col,index) in colums_title"
:key="col.index"
:prop="col.prop"
:label="col.label"
:width="calcWidth(index)">
<template v-if="index===0">
<!-- 添加slot其它列值不能正常显示 -->
<el-button size="small"><i class="el-icon-printer"></i></el-button>
</template>
</el-table-column>
</el-table>
反正没多研究,感觉好像是把默认的template替换了,系统找不到要显示的控件所以不能显示了。这里采取@cell-click="cellClick"方法,列值点击更灵活。比如我只想第一列响应,其它列不响应。
cellClick (row, column, cell, event) {
if (cell.cellIndex !== 0) return
this.$message(row.name)
}
是不是非常简单!

本文链接:https://www.it72.com/12566.htm