vue+ element table如何给指定的单元格添加点击事件
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<el-table
class="table_info"
:data="tableData"
border
stripe
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
:row-style="tableRowStyle"
:header-cell-style="tableHeaderColor"
:cell-style="{padding:'2px'}"
>
<el-table-column
prop="documentName"
label="文件名称"
width="180"
align="center"
>
<template slot-scope="scope">
<el-link @click="preview(scope.row)" v-if="scope.row.documentName==0"></el-link>
<el-link @click="preview(scope.row)" v-else>{{scope.row.documentName}}</el-link>
</template>
</el-table-column>
</el-table>
js:
// 点击文件名称弹框
preview(row,id){
console.log(id,row);
this.show4=!this.show4;
this.show2=!this.show2;
},
<el-table-column prop="peoples_count" label="参与人数" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleJoinPeople(scope.row)" v-if="scope.row.peoples_count==0">管理参与人数</el-button>
<el-button type="text" size="small" @click="handleJoinPeople(scope.row)" v-else>{{scope.row.peoples_count}}</el-button>
</template>
</el-table-column>
<el-table-column prop="yxcard_count" label="办卡人数" align="center" width="150" >
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleCard(scope.row)" v-if="scope.row.yxcard_count==0">管理办卡人数</el-button>
<el-button type="text" size="small" @click="handleCard(scope.row)" v-else>{{scope.row.yxcard_count}}</el-button>
</template>
</el-table-column>
<el-table-column prop="goods_count" label="活动兑换商品" align="center" width="150" >
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleGoods(scope.row)" v-if="scope.row.goods_count==0">管理活动商品</el-button>
<el-button type="text" size="small" @click="handleGoods(scope.row)" v-else>{{scope.row.goods_count}}</el-button>
</template>
</el-table-column>
<el-table-column prop="order_count" align="center" label="商品订单" >
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleOrder(scope.row)" v-if="scope.row.order_count==0">管理订单</el-button>
<el-button type="text" size="small" @click="handleOrder(scope.row)" v-else>{{scope.row.order_count}}</el-button>
</template>
</el-table-column>
handleJoinPeople(row,id){
console.log(row.ac_id);
},
handleCard(row,id){
console.log(row.ac_id);
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)