element ui table某个单元格添加点击事件

1.创建表格

<el-table

ref="multipleTable"

:data="tableData"

border

>

<el-table-column fixed type="selection" align="center"></el-table-column>

<div v-for="(item,index) in columns" :key="index">

<el-table-column

:prop="item.prop"

:label="item.label"

:formatter="item.formatter"

align="center"

show-overflow-tooltip

></el-table-column>

</div>

</el-table>

2.创建表头+事件 

 

columns: [

{

prop: "index",

label: "序号",

formatter: (row, column, cellValue, index) => {

return <span οnclick={that.aa.bind(null, row)}>{index + 1}</span>;

}

},

{

prop: "userName",

label: "姓名"

},

{

prop: "roleName",

label: "角色名称"

},

{

prop: "topManagerUserVo",

label: "上级主管",

formatter: (row, column) => {

if (row.topManagerUserVo) {

return row.topManagerUserVo.roleName;

} else {

return "";

}

}

},

{

prop: "accountStatus",

label: "帐号状态",

formatter: (row, column) => {

if (row.accountStatus == 0) {

return "禁用";

}

if (row.accountStatus == 1) {

return "启用";

}

if (row.accountStatus == 2) {

return "已过期";

}

}

},

],

 

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一种实现方式。 首先,我们需要封装一个 table 组件,可以使用 Vue 的组件封装方式进行实现。在组件中,我们需要定义 table 的列和数据,同时还需要定义事件方法来处理单元绑定的事件。 接下来,我们可以使用 slot-scope 来动态渲染表单元,并将对应的数据和事件传递给单元。这样,在单元中就可以轻松绑定事件了。 下面是一个示例代码: ```vue <template> <el-table :data="tableData"> <el-table-column v-for="column in tableColumns" :key="column.prop" :label="column.label"> <template slot-scope="scope"> <span @click="handleCellClick(column.prop, scope.row)">{{ scope.row[column.prop] }}</span> </template> </el-table-column> </el-table> </template> <script> export default { props: { tableColumns: { type: Array, required: true }, tableData: { type: Array, required: true } }, methods: { handleCellClick(prop, row) { // 处理单元事件 console.log(`prop: ${prop}, value: ${row[prop]}`); } } }; </script> ``` 在这个示例中,我们接收两个 props,分别为 tableColumns 和 tableData,分别表示表的列和数据。在表的渲染中,我们使用了 slot-scope 来动态渲染表单元,并将对应的数据和事件传递给单元。在单元中,我们使用 @click 来绑定点事件,并调用 handleCellClick 方法来处理事件。 当然,这只是一种实现方式,您可以根据具体的需求来进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值