vue +element 表格选中的数据获取其中一列数据转换成字符串用逗号隔开

<template>
  <div>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
    <p>选中的姓名列表: {{selectedNames}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {name: '张三', age: 18, gender: '男'},
        {name: '李四', age: 20, gender: '女'},
        {name: '王五', age: 22, gender: '男'},
      ],
      selectedRows: [],
      selectedNames: '',
    };
  },
  methods: {
    handleSelectionChange(rows) {
      this.selectedRows = rows;
      this.selectedNames = rows.map(row => row.name).join(', '); // 提取name属性并用逗号隔开
    },
  },
};
</script>