项目中用到了vxe-table，昨天在用的时候遇到了一些问题，这里总结一下。

prop和label弃用

项目中有这样一段代码：

<vxe-table
  ref="xTable"
  border
  :data="tableData"
  @toggle-row-expand="toggleExpandChangeEvent">
  <vxe-table-column prop="name" label="姓名"></vxe-table-column>
  <vxe-table-column prop="sex" label="性别"></vxe-table-column>
  <vxe-table-column prop="age" label="年龄"></vxe-table-column>
</vxe-table>

结果运行的时候控制台出现警告，说prop和label已经弃用，应该使用field和title。看了下文档，原来文档不是最新的，导致还是一些旧的属性。更换属性名之后再次运行就正常了。

<vxe-table
  ref="xTable"
  border
  :data="tableData"
  @toggle-row-expand="toggleExpandChangeEvent">
  <vxe-table-column field="name" title="姓名"></vxe-table-column>
  <vxe-table-column field="sex" title="性别"></vxe-table-column>
  <vxe-table-column field="age" title="年龄"></vxe-table-column>
</vxe-table>

这里说明一下，Element UI中的el-table组件用的字段还是prop和label。

展开行插槽和普通行插槽

项目中还有一段代码：

<vxe-table
  ref="xTable"
  border
  :data="tableData"
  @toggle-row-expand="toggleExpandChangeEvent">
  <vxe-table-column type="expand" width="60">
    <template v-slot="{ row }">
        <div v-for="(item, index) in row.paths" :key="index">
			<div>{{ item.action }}</div>
			<div>{{ item.path }}</div>
		</div>
    </template>
  </vxe-table-column>
  <vxe-table-column title="姓名">
	<template v-slot="{ row }">
		<span>{{ row.name }}</span>
	</template>	
  </vxe-table-column>
</vxe-table>

上面的代码运行出现警告，提示展开行的插槽应该是content。我们可以看到，上面的表格共有两个字段，都用到了插槽，第一个字段的type="expand"代表它是一个展开行，第二个则是普通行。看了下还是文档太老的原因，把展开行插槽v-slot改为v-slot:content就正常了。

<vxe-table
  ref="xTable"
  border
  :data="tableData"
  @toggle-row-expand="toggleExpandChangeEvent">
  <vxe-table-column type="expand" width="60">
    <template v-slot:content="{ row }">
        <div v-for="(item, index) in row.paths" :key="index">
			<div>{{ item.action }}</div>
			<div>{{ item.path }}</div>
		</div>
    </template>
  </vxe-table-column>
  <vxe-table-column title="姓名">
	<template v-slot="{ row }">
		<span>{{ row.name }}</span>
	</template>	
  </vxe-table-column>
</vxe-table>

这里再说一下插槽的应用场景，vxe-table字段默认使用field字段传参，但是这样功能太少，如果希望调整字段样式，或者插入自定义的图标等内容，就要使用插槽。

vxe-table 3.x 文档