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);
},
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
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 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)