ElementUI中table使用render/jsx渲染

Posted 2023-04-12

参考技术A 在使用elemenUI的table的时候,为了项目的样式统一我对tabel进行了简单的封装, 主要通过传入data以及columns来渲染table.

通过if判断el-table-column的类型,但是有时候碰见复杂的需求,这种方式是不现实的,因为我们不可能去判断所有的类型. 这个时候用render/jsx去插入slot的方式渲染就再合适不过了.

比如这种需求, 渲染一个label + 一个icon + 一个弹出框, 弹出框内容是根据当前行的数据渲染出来对的.

我们在初始化columns的时候声明类型,以及render函数, 返回VNode节点.

vue中使用elementui里的table时 checkBox不被选中设置

<el-table-column type="selection" width="55" :selectable=‘checkboxInit‘>

 

methods里
　　
checkboxInit(row,index){
　　if (row.withdrawState==2)//这个判断根据你的情况而定
　　　　return 0;//不可勾选
　　else
　　　　return 1;//可勾选
　　},