el-table el-table-column两个字段值拼接展示

在Vue.js中，使用Element UI库时，可以通过在<el-table-column>中使用作用域插槽（scope slot）来实现两个字段的拼接展示。

以下是一个简单的例子，假设我们有一个名为userList的数据源，其中每个用户有firstName和lastName两个字段，我们想要在一个表格列中展示这两个字段的拼接。

<template>
  <el-table :data="userList" style="width: 100%">
    <!-- 其他列 -->
    <el-table-column prop="firstName" label="First Name"></el-table-column>
    <el-table-column prop="lastName" label="Last Name"></el-table-column>
    <!-- 拼接全名的列 -->
    <el-table-column label="Full Name">
      <template slot-scope="scope">
        {{ scope.row.firstName }} {{ scope.row.lastName }}
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      userList: [
        // 用户数据
        { firstName: 'John', lastName: 'Doe' },
        { firstName: 'Jane', lastName: 'Smith' },
        // 更多用户数据
      ]
    };
  }
};
</script>

在上面的代码中，我们使用了<el-table-column>的label属性来设置列的名称，并通过<template>和slot-scope来访问作用域插槽中的每一行数据。然后通过插槽的scope.row对象来访问该行的firstName和lastName字段，并使用插值表达式{{ }}将它们拼接在一起，以展示在表格的“Full Name”列中。