vue3 使用 jsx

<script lang="tsx">
import {defineComponent, ElSelect, ElOption } from 'element-plus'
import { ref, reactive } from 'vue'
import { map } from 'lodash-es'

let selectionValue = ref('子应用')

const selectionOptions = reactive([
  {
    value: '子应用1',
    label: '子应用1'
  },
  {
    value: '子应用2',
    label: '子应用2'
  },
  {
    value: '子应用3',
    label: '子应用3'
  },
  {
    value: '子应用4',
    label: '子应用4'
  }
])
export default defineComponent({
  name: 'ToolHeader',
  setup() {
    return () => (
		<ElSelect
            v-model={selectionValue.value}
            filterable
            placeholder="请输入应用"
            class="w-50%"
          >
            {map(selectionOptions, (item, key) => (
              <ElOption value-key={key} label={item.label} value={item.value} />
            ))}
		ElSelect>
    )
  }
})

注意:
.vue文件可以直接赋值, 但 jsx中不能这样直接赋值

在jsx中里面需要通过修改 selectionValue.value 的值，可以触发模板的重新渲染，