微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在VueJS中使表格行可点击?

如何解决如何在VueJS中使表格行可点击?

我正在为 VueJs 使用 CoreUI 管理主题

我正在尝试通过 CoreUI 制作表格。现在我必须使表格的行可点击。

知道如何做到这一点吗?

这里有关于表格的文档: https://coreui.io/vue/docs/components/table.html#cdatatable-api 在 events 下的 CDataTable API 中,它们具有行单击事件。我只是不知道如何使用它。

任何形式的帮助将不胜感激。

解决方法

像这样添加事件监听器 请关注方法中的@row-clicked="rowClickHandler"和方法rowClickHandler

    <template>
      <CCardBody>
        <CDataTable
          :items="items"
          :fields="fields"
          @row-clicked="rowClickHandler"  // <== focus here
        >
          ... Rest of the code
        </CDataTable>
      </CCardBody>
    </template>
    <script>

export default {
  name: 'AdvancedTables',data () {
    return {
      items: [],fields: [],}
  },methods: {
    rowClickHandler ((item,index,column name,event) {
    // whatever you want to do
    },... other methods
  }
}
</script>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。