vue+element-ui,表格展示内容里的字段名有两个，在代码里怎么写prop对应两个字段名

vue+element-ui,表格展示内容里的字段名有两个，在代码里怎么写prop对应两个字段名？
页面如图

代码如图

在el-table-column中使用了一个自定义列模板，它包含了两个span元素，分别用于展示name和name_cn字段对应的数据。然后使用了scope.row来访问当前行的数据，scope.row.name表示访问name字段对应的数据，scope.row.name_cn则表示访问name_cn字段对应的数据。给你举个例子

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名">
      <template slot-scope="scope">
        <span>{{ scope.row.name }}</span>
        <br>
        <span>{{ scope.row.name_cn }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', name_cn: '约翰', age: 28, address: 'New York' },
        { name: 'Jane', name_cn: '简', age: 24, address: 'London' },
        { name: 'Bob', name_cn: '鲍勃', age: 31, address: 'Paris' },
      ]
    }
  }
}
</script>

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7751243
你也可以参考下这篇文章：vue+element-ui 如何根据获取的prop的值显示不同的标签
除此之外, 这篇博客: vue+element-ui表格中实现树状表格。并且插入下拉框项中的 vue+element-ui表格中实现树状表格可以进行多选。并且插入下拉框项 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

在开发中遇到一个需求是表格中的数据要以复选框树状的形式来展示，并且表格的某一列表头嵌套下拉框，下拉框中可以任意选数据，点击多选框进行多选保存
如图每一行数据可以进行对版本的一个下拉选择，并且进行勾选保存，html代码如下：
（小菜鸡一枚，大家多多指教！欢迎大家指出问题~~~~）

  <el-table ref="table"
                  :data="tableData"
                  style="width: 100%;margin-bottom: 20px;"
                  row-key="id"
                  border
                  :indent="50"
                  :header-cell-style="{background:'#F2F2F2'}"
                  :select-on-indeterminate="false"
                  @select="select"
                  @select-all="selectAll"
                  @selection-change="selectionChange"
                  default-expand-all
                  :tree-props="{children: 'childList'}">
          <el-table-column type="selection"
                           :selectable='selectInit'
                           width="55">
          </el-table-column>
          <el-table-column prop="date"
                           label="日期"
                           sortable
                           width="180">
          </el-table-column>
          <el-table-column label="版本号"
                           width="">
            <template slot-scope="scope">
              <el-select v-model="scope.row.version"
                         @change="change(scope.$index,scope.row)">
                <el-option v-for="item in roleData"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id"></el-option>
              </el-select>

            </template>
          </el-table-column>

          <el-table-column prop="address"
                           label="地址">
          </el-table-column>
        </el-table>

js代码：

export default {
  data () {
    return {
      checkPageAll: false,
      tableData: [{
        id: 1,
        date: '2016-05-01',
        address: '上海市普陀区金沙江路1弄'
      }, {
        id: 2,
        date: '2016-05-02',

        address: '上海市普陀区金沙江路 2 弄'
      }, {
        id: 3,
        date: '2016-05-03',

        address: '上海市普陀区金沙江路 3 弄',
        childList: [{
          id: 31,
          date: '2016-05-31',

          address: '上海市普陀区金沙江路 4 弄'
        }, {
          id: 32,
          date: '2016-05-32',

          address: '上海市普陀区金沙江路 5 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-04',

        address: '上海市普陀区金沙江路 6 弄'
      }],
      selectArr: [],
      roleData: []
    };
  },
  methods: {
    change (index, row) {
      console.log(index, row)
    //设置多选框某些项不可多选
    selectInit (row) {
      // console.log(index)
      if (row.id == 3) {
        return false  //不可勾选
      } else {
        return true  //可勾选
      }
    },
    select (selection, row) {
      if (selection.some(el => { return row.id === el.id })) {
        if (row.childList) {
          row.childList.map(j => {
            this.toggleSelection(j, true)
          })
        }
      } else {
        if (row.childList) {
          row.childList.map(j => {
            this.toggleSelection(j, false)
          })
        }
      }
    },
    selectAll (selection) {
      // tabledata第一层只要有在selection里面就是全选
      const isSelect = selection.some(el => {
        const tableDataIds = this.tableData.map(j => j.id)
        return tableDataIds.includes(el.id)
      })
      // tableDate第一层只要有不在selection里面就是全不选
      const isCancel = !this.tableData.every(el => {
        const selectIds = selection.map(j => j.id)
        return selectIds.includes(el.id)
      })
      if (isSelect) {
        selection.map(el => {
          if (el.childList) {
            el.childList.map(j => {
              this.toggleSelection(j, true)
            })
          }
        })
      }
      if (isCancel) {
        this.tableData.map(el => {
          if (el.childList) {
            el.childList.map(j => {
              this.toggleSelection(j, false)
            })
          }
        })
      }
    },
    selectionChange (selection) {
      this.selectArr = selection
      console.log(this.selectArr, '0909')
    },
    toggleSelection (row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.table && this.$refs.table.toggleRowSelection(row, select)
        })
      }
    },
  }
};

您还可以看一下 jason老师的vue通用后台管理课程中的 element-ui在网页中的使用小节, 巩固相关知识点
以下回答由chatgpt基于相关博客总结生成:
对于将表格展示内容里的两个字段名对应到prop上的需求，可以在表格组件的template中通过定义表头的方式将数据对应到prop上。具体的步骤如下：
1.在表格组件的template中，定义表头。以element-ui的el-table为例，可以通过el-table-column来定义表头。代码如下：
```
<el-table
  :data="tableData">
  <el-table-column
    label="字段1"
    prop="field1">
  </el-table-column>
  <el-table-column
    label="字段2"
    prop="field2">
  </el-table-column>
</el-table>
```
其中，el-table的:data属性指定表格的数据源，每个el-table-column的label属性指定表头显示的文字，prop属性指定数据对应到组件中的哪个prop上。可以根据具体需要来修改label和prop的值。
2.在数据源中，将相应的字段名改为对应的prop名。例如，如果要将数据源中的字段名field1和field2对应到上面定义的prop上，则可以将数据源的字段名改为field1和field2，这样在表格组件中显示的数据就会自动对应到prop上。
总的来说，只需要在template中定义表头，并将数据源中的字段名改为prop名即可实现将表格展示内容里的两个字段名对应到prop上的需求。可以根据实际情况来修改表头的样式和prop的名称。