element-ui table

 

 

 

额，最近有点频繁记录。感受遇到了不少的问题。而后不断的查，不断的尝试修改。而后获得解决。仍是记录关于element-ui的使用。此次是关于表格的使用。

表格使用其实平时用的话也就那么几个属性。虽然官网提供了好像仍是蛮多的属性和方法，可是通常状况下不是很复杂的表格的话，使用的属性都是基本的。方法的也基本是。

此次遇到的问题整整折腾了快一天的时间。代码使你兴奋，同时，更多的是使你"疯狂"。这个疯狂更多时候指的是抓狂！

    不废话了，开始进入问题：

   使用element-ui的表格时候表格内容的单一性不少时候不能知足咱们的需求。因此不少时候咱们都要自定义表格的格式，恩，这个官网也有说到，

 

具体的用法就是在el-table-column中嵌套一个<template></template>

说到自定义的话，我还会想到fomatter，单元格内容的格式化，固然element-ui中也提供了这样的属性，在须要格式化的单元格添加fomatter属性，在methods里面去实现fomatter，

使用fomatter我感受通常是这种状况：

    

好比说个人表格有一列状态列，从后端获得的数据是（0或者1），也许表明者审核和未审核，或者其余意思，可是这个时候展现到表格中须要进行格式化，这个时候就可使用到formatter属性了：

      这里列举实现方式:

     formatterState(row,column,columnValue){

        if(row.state==1){return '已审核';}

       else{return '未审核'；}

     }

实现方法也是比较简单。可是若是你的格式化内容包含了html片断的话，建议仍是使用官网提供的模板嵌套的方法实现自定义内容，由于fomatter返回的值是string，一样也会把html片断当作字符串输出。致使不会解析。

自定义内容解决了。如今我要实现让table和baguettebox.js 画廊插件进行联合使用。

就是说后端返回的数据中有照片，可是我要当点击某一行的内容的时候，要查看某一行对应的照片，这里使用的画廊插件：baguttebox.js,根据上面的自定义表格内容就能够很容易获得如上图的a超连接样式，

如今只须要使用baguttebox.js的一段代码就能够实现了？

恩，感受差很少。试一下效果呢？.....无效。感受没有什么不对的地方啊！！不停的改，没错。从昨天下午改到如今。。我劝本身不能angry！要淡定！

没有效果？ 我把内容图片提到table以外，恩！能够了，没错，这种状况下更加angry了，为何放在你element-ui中的table中就是不行呢！

最后去对比有效果的 a和没有效果的a，发现了不一样之处：

有效果的a的click事件是使用了画廊插件的。而没有效果的a的click事件根本就没有。因此根本没和插件搭上关系。

在这个组件中没法实现效果。就把自定义的内容提到子组件中试试。

子组件：

在含有table的父组件中来引用它，虽然看起来好像没有区别。可是竟然奏效了。a连接也不负众望的加上了插件的click事件。点击有效！

虽然不是太明白这个究竟是个什么意思，放在子组件中就实现了效果。可是总算是找到了解决办法。有相似问题的童鞋也能够参考参考。或许就实现了你的效果呢