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

【问题标题】：How to make rows of table clickable in VueJS?如何在 VueJS 中使表格的行可点击？
【发布时间】：2021-01-11 08:35:53
【问题描述】：

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

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

知道我该怎么做吗？

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

我们将不胜感激。

【问题讨论】：

标签： vue.js datatables click core-ui

【解决方案1】：

像这样添加事件监听器请关注方法中的@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>

【讨论】：