首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快)

 

当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦)

 

ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/

额,最近有点频繁记录。感觉遇到了很多的问题。然后不断的查,不断的尝试修改。然后得到解决。还是记录关于element-ui的使用。这次是关于表格的使用。

还有,使用前请引入bootstrap的相关css,js,jQuery,以及bootstrap-table的css,js至少这5个基本文件

表格使用其实平时用的话也就那么几个属性。虽然官网提供了好像还是蛮多的属性和方法,但是一般情况下不是很复杂的表格的话,使用的属性都是基本的。方法的也基本是。

一,html表格方式

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

例一:需求,简单的表格数据呈现,表头是两行,还有一个上下浮的箭头

    不废话了,开始进入问题:

分析:很简单,只需要html就可以实现,按照常规的表格来画,添加上bootstrap-table独有的自定义属性即可,注意如果不使用js请在最开始的table标签中加上data-toggle

 
 使用element-ui的表格时候表格内容的单一性很多时候不能满足我们的需求。所以很多时候我们都要自定义表格的格式,恩,这个官网也有说到,

html代码:

图片 1

<div>
<table data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover" id="tableL01">
<thead>
<tr>
<th data-field="lhc" data-rowspan="2" data-align="center" data-valign="middle">来耗存</th>
<th data-field="dr" data-colspan="3" data-align="center" data-valign="middle">当日</th>
<th data-field="bz" data-colspan="3" data-align="center" data-valign="middle">本周</th>
<th data-field="by" data-colspan="3" data-align="center" data-valign="middle">本月</th>
</tr>
<tr>
<th data-field="drbq" data-align="center" data-valign="middle">本期</th>
<th data-field="drtb" data-align="center" data-valign="middle">同比</th>
<th data-field="drhb" data-align="center" data-valign="middle">环比</th>
<th data-field="bzbq" data-align="center" data-valign="middle">本期</th>
<th data-field="bztb" data-align="center" data-valign="middle">同比</th>
<th data-field="bzhb" data-align="center" data-valign="middle">环比</th>
<th data-field="bybq" data-align="center" data-valign="middle">本期</th>
<th data-field="bytb" data-align="center" data-valign="middle">同比</th>
<th data-field="byhb" data-align="center" data-valign="middle">环比</th>
</tr>
</thead>
<tbody>
<tr>
<td>来煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>来煤量</td>
<td>76573</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>4.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>1.45</td>
<td>234534</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.75</td>
<td>44225</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.74</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>3.45</td>
</tr>
<tr>
<td>耗煤量</td>
<td>43363</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>32422</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>13345</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>来煤量</td>
<td>34624</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>4.35</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>1.23</td>
<td>452346</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.32</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.05</td>
<td>94524</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
<tr>
<td>耗煤量</td>
<td>21341</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td>
<td>334322</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>1.13</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>4.21</td>
<td>3125113</td>
<td><i class='glyphicon glyphicon-arrow-down'></i>2.21</td>
<td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td>
</tr>
</tbody>
</table>
</div>

 

例二:需求,第二个表格后面有个显示进度的自定义单元格,并且第一行要求是做一个合计的统计展示,这两个功能需要用js来设定自定义行列

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

html代码:

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

<div>
<table data-toggle="table" data-height="268" class="table table-striped table-bordered table-hover" id="tableL02">
<thead>
<tr>
<th data-field="id" data-align="center" data-valign="middle">序号</th>
<th data-field="gys" data-align="center" data-valign="middle">供应商</th>
<th data-field="pz" data-align="center" data-valign="middle">品种</th>
<th data-field="rz" data-align="center" data-valign="middle">热值</th>
<th data-field="mj" data-align="center" data-valign="middle">煤价</th>
<th data-field="bmdj" data-align="center" data-valign="middle">标煤单价</th>
<th data-field="drlm" data-align="center" data-valign="middle">当日来煤</th>
<th data-field="ljlm" data-align="center" data-valign="middle">累计来煤</th>
<th data-field="yjhl" data-align="center" data-valign="middle">月计划量</th>
<th data-field="yjhjd" data-align="center" data-valign="middle" data-formatter="progress">月计划完成进度</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>双欣矿业</td>
<td>低硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>6686.08</td>
<td>30000</td>
<td>22%</td>
</tr>
<tr>
<td>3</td>
<td>伊泰股份</td>
<td>工程煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>51888.72</td>
<td>70000</td>
<td>74%</td>
</tr>
<tr>
<td>4</td>
<td>嘉远公司</td>
<td>中高硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>20041.86</td>
<td>90000</td>
<td>100%</td>
</tr>
<tr>
<td>5</td>
<td>爱地能源</td>
<td>低硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>5191.08</td>
<td>30000</td>
<td>0%</td>
</tr>
<tr>
<td>6</td>
<td>恒泰煤炭</td>
<td>中高硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>18265.56</td>
<td>0</td>
<td>22%</td>
</tr>
<tr>
<td>7</td>
<td>双欣矿业</td>
<td>低硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>6686.08</td>
<td>30000</td>
<td>22%</td>
</tr>
<tr>
<td>8</td>
<td>双欣矿业</td>
<td>低硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>6686.08</td>
<td>30000</td>
<td>22%</td>
</tr>
<tr>
<td>9</td>
<td>双欣矿业</td>
<td>低硫煤</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>6686.08</td>
<td>30000</td>
<td>22%</td>
</tr>
</tbody>
</table>
</div>

使用fomatter我感觉一般是这种情况:

js代码:

    图片 2

//声明用来统计合计(累计来煤,月计划)的变量
var yjhArr=[];
var ljlmArr=[];
//显示进度条的自定义列
function progress (value,row){
var width=parseInt(row.yjhjd);
var red='#e63737';
var blue='#b6ccf4';
yjhArr.push(row.yjhl);
ljlmArr.push(row.ljlm);
return "<div style='height:20px;border:1px solid #b6ccf4;'>          (width>=100?red:blue)+";'>"+value+"</div>"
}
//计算合计数值的方法
function yjhTotal(){
var subyjh=0;
var subljlm=0;
var row=[];
for(var i=0;i<yjhArr.length;i++){
if(yjhArr[i]==""){
yjhArr[i]=0;
}
subyjh+=parseFloat(yjhArr[i]);
}
for(var j=0;j<ljlmArr.length;j++){
if(ljlmArr[j]==""){
ljlmArr[j]=0;
}
subljlm+=parseFloat(ljlmArr[j]);
}
row.push({
id:1,
gys:'合计',
pz:'',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:subljlm.toFixed(2),
yjhl:subyjh,
yjhjd:'107%'
});
return row
}

比如说我的表格有一列状态列,从后端得到的数据是(0或者1),也许代表者审核和未审核,或者其他意思,但是这个时候展示到表格中需要进行格式化,这个时候就可以使用到formatter属性了:

分析:自定义行列需要添加data-formatter=‘方法名’,其中progress()方法中的参数row,会在表格生成行的时候每生成一行就执行一次并将该行的对象传进来。

      这里列举实现方式:

二:js方式

     formatterState(row,column,columnValue){

通过这种方法,可以很方便的为表格设置参数,处理数据方面十分便捷,尤其是设置请求方式和地址时,不过这个项目暂时只是静态页面,有关数据的以后接触在写上来

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

例一:同上例一

       else{return ‘未审核’;}

html:

     }

<div>
<table class="table table-striped table-bordered table-hover" id="tableL01"></table>
</div>

实现方法也是比较简单。但是如果你的格式化内容包含了html片段的话,建议还是使用官网提供的模板嵌套的方法实现自定义内容,因为fomatter返回的值是string,同样也会把html片段当做字符串输出。导致不会解析。

js:

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

//表格插件(表一)开始
$('#tableL01').bootstrapTable({
height:268,
//模拟数据
columns: [[{
align:'center',
valign:'middle',
field: 'lhc',
title: '来耗存',
rowspan:2
}, {
align:'center',
valign:'middle',
field: 'dr',
title: '当日',
colspan:3
}, {
align:'center',
valign:'middle',
field: 'bz',
title: '本周',
colspan:3
},{
align:'center',
valign:'middle',
field: 'by',
title: '本月',
colspan:3}],
[{
align:'center',
valign:'middle',
field: 'drbq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'drtb',
title: '同比',
formatter:trend
},{
align:'center',
valign:'middle',
field: 'drhb',
title: '环比',
formatter:trend}, {
align:'center',
valign:'middle',
field: 'bzbq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'bztb',
title: '同比',
formatter:trend
},{
align:'center',
valign:'middle',
field: 'bzhb',
title: '环比',
formatter:trend}, {
align:'center',
valign:'middle',
field: 'bybq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'bytb',
title: '同比',
formatter:trend},{
align:'center',
valign:'middle',
field: 'byhb',
title: '环比',
formatter:trend
}]],
data:[{
id:1,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:2,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:3,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:4,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:5,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:6,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:7,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:8,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:9,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:10,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:11,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:12,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
}]});
//模拟数据结束
//上下浮动箭头样式添加
function trend(value,row){
var trendIcon=row.id%2===0?'glyphicon glyphicon-arrow-down':'glyphicon glyphicon-arrow-up';
return "<i class='"+trendIcon+"'></ i>"+value
}
//表格插件一结束

图片 3

分析:$(‘#tableL01’).bootstrapTable({})是插件开始的标志,在其中添加表格的参数,然后在data:是表格的数据,而columns中则是设置列参数以及表格数据的地方,其中这个项目有代表性的是表头分为两部分,因此需要在columns中加两个数组【{}】,【{}】。之前都写在一个数组里,而源代码遍历的是columns的length

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

例二:

图片 4

html相同都是只需要一个带id的table标签即可

现在只需要使用baguttebox.js的一段代码就可以实现了?

js:

图片 5

//表格插件(表二)开始
//声明用来统计合计(累计来煤,月计划)的变量
var yjhArr=[];
var ljlmArr=[];
$('#tableL02').bootstrapTable({
height:268,
//模拟数据
columns: [{
align:'center',
valign:'middle',
field: 'id',
title: '序号'
}, {
align:'center',
valign:'middle',
field: 'gys',
title: '供应商'
}, {
align:'center',
valign:'middle',
field: 'pz',
title: '品种'
},{
align:'center',
valign:'middle',
field: 'rz',
title: '热值'
},{
align:'center',
valign:'middle',
field: 'mj',
title: '煤价'
},{
align:'center',
valign:'middle',
field: 'bmdj',
title: '标煤单价'
},{
align:'center',
valign:'middle',
field: 'drlm',
title: '当日来煤'
},{
align:'center',
valign:'middle',
field: 'ljlm',
title: '累计来煤'
},{
align:'center',
valign:'middle',
field: 'yjhl',
title: '月计划量'
},{
align:'center',
valign:'middle',
field: 'yjhjd',
title: '月计划完成进度',
formatter:progress
}],
data:[{
id:2,
gys:'双欣矿业',
pz:'低硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'6686.08',
yjhl:'30000',
yjhjd:'22%'
},{
id:3,
gys:'伊泰股份',
pz:'工程煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'51888.72',
yjhl:'70000',
yjhjd:'74%'
},{
id:4,
gys:'嘉远公司',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'20041.86',
yjhl:'90000',
yjhjd:'100%'
},{
id:5,
gys:'爱地能源',
pz:'低硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'5191.08',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
}
]});
//模拟数据结束
//显示进度条的自定义列
function progress (value,row){
var width=parseInt(row.yjhjd);
var red='#e63737';
var blue='#b6ccf4';
yjhArr.push(row.yjhl);
ljlmArr.push(row.ljlm);
return "<div style='height:20px;border:1px solid #b6ccf4;'>=100?red:blue)+";'>"+value+"</div>"
}
//计算合计数值的方法
function yjhTotal(){
var subyjh=0;
var subljlm=0;
var row=[];
for(var i=0;i<yjhArr.length;i++){
if(yjhArr[i]==""){
yjhArr[i]=0;
}
subyjh+=parseFloat(yjhArr[i]);
}
for(var j=0;j<ljlmArr.length;j++){
if(ljlmArr[j]==""){
ljlmArr[j]=0;
}
subljlm+=parseFloat(ljlmArr[j]);
}
row.push({
id:1,
gys:'合计',
pz:'',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:subljlm,
yjhl:subyjh,
yjhjd:'107%'
});
return row
}

恩,感觉差不多。试一下效果呢?…..无效。感觉没有什么不对的地方啊!!不停的改,没错。从昨天下午改到现在。。我劝自己不能angry!要淡定!

这个其实和第一种方式差别不大,只不过把自定义列放在数据中设置罢了。比较好理解。而关于其他参数可以参考官网,数据是动态的如何添加网上也有不少例子,只要都放在.bootstrapTable({})中就可以了

没有效果?
我把内容图片提到table之外,恩!可以了,没错,这种情况下更加angry了,为什么放在你element-ui中的table中就是不行呢!

以上所述是小编给大家介绍的BootStrap
table表格插件自适应固定表头(超好用),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

最后去对比有效果的 a和没有效果的a,发现了不同之处:

您可能感兴趣的文章:

图片 6

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

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

子组件:

图片 7

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

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

 

相关文章