Easy UI(for Vue) Datagrid GridColumn添加click点击操作

最新推荐文章于 2025-01-08 11:29:22 发布

原创最新推荐文章于 2025-01-08 11:29:22 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #easyui #datagrid #click

前端同时被 2 个专栏收录

20 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

在Vue版的EasyUI中，DataGrid的GridColumn不支持click方法。为实现点击功能，需要使用template和slot来渲染列内容，并通过@click事件处理函数来触发操作。示例代码展示了如何通过在template内添加cursor:pointer样式和u标签实现点击服务名称调用callServiceInfo方法。

问题：

<GridColumn title="服务名称" field="service_name" @click="callServiceInfo(scope.row)">
</GridColumn>

要对

这里实现点击功能，但是Vue版的easyui，DataGrid子项GridColumn没有click方法，即以上的代码不会报错，但是click方法不能起效。

PS：这个直接加click方法应该是在jquery版本easyui下是可以生效的。

解决：

<GridColumn title="服务名称">
  <template slot="body" slot-scope="scope">
    <u style="cursor: pointer" @click="callServiceInfo(scope.row)">{{scope.row.service_name}}</u>
  </template>
</GridColumn>

自己用template去渲染实现，style="cursor: pointer"是保证鼠标移上去，光标呈现为指示链接的指针（一只手）。<u></u>标签是给这个服务名称添加下划线，暗示别人这个可以点击。