前端表格使用vxe-table进行渲染，使用el-select进行选择合适的条件查询，且给el-select默认赋值及使用i18n进行翻译

一、项目需求及项目实现

• 表格页面使用vxe-table进行渲染，查询区使用el-select进行选择，且使用i18n翻译选择项

• 代码实现：

<template>
  // 这里是自定义的表格组件
  <table
    ref="tableRef"
    :form="query"
    :request="request"
    :columns="columns"
  >
  </app-table>
</template>

<script lang="ts">
import {
   
  computed,
  defineComponent,
  h,
  reactive,
  ref,
  unref,
  watch,
  watchEffect,
  toRefs,
} from 'vue';
import {
    useI18n } from 'vue-i18n';
import {
    useRouter } from 'vue-router';
import {
   
  ElOption,
  ElSelect,
} from 'element-plus';
export default defineComponent({
   
  name: 'Status',
  components: {
   },
  setup() {
   
    const {
    t } = useI18n();
    const router = useRouter();
    const tableRef = ref<IProTableMethods>();
    const [columns, setColumns] = useState<IProColumn<StatusVO>[]>([]);
    watchEffect(() => {
   
      setColumns([
       {
   
          label: t('Status.status'),
          prop: 'status',
          enumValue: translateEnum(t, 'Status', Status),
          width: 120,
          renderForm: (form) =>
		  // 这里使用了两次h()渲染函数，具体使用看Vue官方文档
            h(
			  //  这里是el-select
              ElSelect,
              {
   
			    
				// 这里绑定了form.status并给了默认值
                modelValue: form.status || '正常',
				// 这里是更新绑定的值
                'onUpdate:modelValue': (value) => {
   
                  form.status = value;
                },
                class: 'full-width',
              },
			  // 这里是子节点，有多个el-option则用[]表示
              [
                h(ElOption, {
   
				  // 这里是el-option的label
                  label: t('umsUser.status.normal'),
				  // 这里是el-option的value
                  value: 'NORMAL',
                }),
                h(ElOption, {
   
                  label: t('umsUser.status.disabled'),
                  value: 'DISABLED',
                }),
              ]
            ),
        },
      ]);
    });
    function request(params) {
   
      const {
   
        status,
      } = params || state.query;
      const query: any = {
   
        status,
      };
	  // 接口传递query参数给后端
      return page(query);
    }
    return {
   
      t,
      tableRef,
      request,
      columns,
      setColumns,
      ...toRefs(state),
    };
  },
  computed: {
   
    Status: () => Status,
  },
 
});
</script>
<style lang="scss">
</style>
<style scoped></style>

<i18n>

{
   
  "zh": {
   
    "Status": {
   
      "NORMAL": "正常",
      "DISABLED": "冻结"
    },
   
  }
}
</i18n>

el-select中的key、value、lable的含义：
1.key：类似身份令牌，唯一的，防止出错。这个key可有可无，一般会选择加上。因为这个key是作为 value 唯一标识的键名，绑定的值是对象类型时，那么它是必填的。
2.label ：给用户看的，当点击下拉菜单时，会出来选项，用户看到的选项就是这个label
3.value ：这是你点击某个选项option的lable后，将对应的值使用v-model绑定进行绑定