【vxe-table】vxe-table渲染表头的两种方式

方式一：使用:columns属性绑定变量

<vxe-table
	:columns="tableColumns"
>
</vxe-table>

const tableColumns = computed(() => {
	return [
		{
			field: '',
			title: '',
			align: '',
		}
	]
})

上述那样远远是不够的，表头死都不渲染。还要写个<vxe-column>标签，以及使用loadColumn()方法加载表头

<vxe-table
    ref="table"
    :data="props.tableData"
    :column="columns"
>
    <vxe-column v-if="columns.length > 0" />
</vxe-table>

<script lang="ts" setup>
import type { VxeTableInstance } from 'vxe-table'

// 加载表头
const table = ref({} as VxeTableInstance)
const initTableColumn = (columns: any) => {
  nextTick(() => {
    const $table = table.value
    if ($table) $table.loadColumn(columns)
  })
}

const tableColumns = computed(() => {
	return [
		{
			field: '',
			title: '',
			align: '',
		}
	]
})

initTableColumn(tableColumns.value)
</script>

方法二：跟element-ui一样，把column写在table标签里面

<vxe-table
  ref="fundNetValue"
  border
  show-overflow
  :column-config="{resizable: true}"
  :table-config="{ column: { defaults: { align: 'center' } } }"
  :edit-config="{trigger: 'click', mode: 'cell'}"
   @edit-closed="handleEditClosed"
   :data="tableData"
  auto-resize
  keep-source
  row-id="id"
  height="auto"
  size="mini"
  :header-cell-style="{ 'text-align': 'center', height: '36px' }"
  :loading="tableLoading"
  :row-config="{ isHover: true, height: 34 }"
  :scroll-y="{ mode: 'wheel' }"
  :empty-render="{ name: 'NotData' }"
>
  <vxe-column type="checkbox" align="center" width="60" />
  <vxe-column field="name" title="1" align="center" :edit-render="{ name: 'input' }">
    <template #edit="{ row }">
      <vxe-input v-model="row.name" type="date" placeholder="请选择1" transfer></vxe-input>
    </template>
  </vxe-column>
  <vxe-column field="nickname" title="2" align="center" :edit-render="{ name: 'input' }">
    <template #edit="{ row }">
      <vxe-input v-model="row.nickname" type="number" placeholder="请输入2" transfer></vxe-input>
    </template>
  </vxe-column>
  <vxe-column field="role" title="3" align="center" :edit-render="{ name: 'input' }">
    <template #edit="{ row }">
      <vxe-input v-model="row.role" type="number" placeholder="请输入3值" transfer></vxe-input>
    </template>
  </vxe-column>
  <vxe-column field="sex2" title="4" />
  <vxe-column field="sex" title="5" />
</vxe-table>