Vue PrimeVue DataTable：实现点击整行展开替代箭头图标

PrimeVue DataTable默认仅支持点击左侧箭头图标展开行，但可以通过绑定行点击事件+调用组件实例方法实现整行点击展开的功能，具体步骤如下：

1. 给DataTable添加引用与行点击事件 #

给DataTable组件添加ref用于获取实例，同时绑定row-click事件处理整行点击逻辑：

<DataTable 
  ref="dtRef" 
  :value="yourData" 
  expandableRows
  @row-click="handleRowClick"
>

2. 实现行点击处理函数 #

在脚本中定义处理函数，通过DataTable实例的toggleRowExpansion方法切换目标行的展开状态：

Vue 3 Script Setup 示例 #

<script setup>
import { ref } from 'vue';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';

const dtRef = ref(null);
// 自定义数据源
const yourData = ref([
  { id: 1, name: '示例数据1', detail: '展开内容1' },
  { id: 2, name: '示例数据2', detail: '展开内容2' }
]);

const handleRowClick = (event) => {
  // 调用实例方法切换行展开状态
  dtRef.value.toggleRowExpansion(event.data);
};
</script>

Vue 2 Options API 示例 #

<script>
export default {
  components: { DataTable, Column },
  data() {
    return {
      dtRef: null,
      yourData: [
        { id: 1, name: '示例数据1', detail: '展开内容1' },
        { id: 2, name: '示例数据2', detail: '展开内容2' }
      ]
    };
  },
  methods: {
    handleRowClick(event) {
      this.$refs.dtRef.toggleRowExpansion(event.data);
    }
  }
};
</script>

3. 避免箭头与整行点击冲突（可选） #

如果不想让点击箭头时触发两次状态切换（箭头自带展开逻辑+整行点击逻辑），可以给展开列添加@click.stop阻止事件冒泡：

<Column expander @click.stop />

完整示例代码 #

<template>
  <DataTable 
    ref="dtRef" 
    :value="yourData" 
    expandableRows
    @row-click="handleRowClick"
  >
    <Column expander @click.stop />
    <Column field="name" header="名称" />
    <template #expansion="slotProps">
      <div class="p-p-4">
        {{ slotProps.data.detail }}
      </div>
    </template>
  </DataTable>
</template>

<script setup>
import { ref } from 'vue';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';

const dtRef = ref(null);
const yourData = ref([
  { id: 1, name: '产品A', detail: '产品A的详细描述信息' },
  { id: 2, name: '产品B', detail: '产品B的详细描述信息' }
]);

const handleRowClick = (event) => {
  dtRef.value.toggleRowExpansion(event.data);
};
</script>

内容的提问来源于stack exchange，提问作者Thanmai12