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

本文主要是介绍前端表格使用vxe-table进行渲染，使用el-select进行选择合适的条件查询，且给el-select默认赋值及使用i18n进行翻译，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、项目需求及项目实现

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

• 代码实现：

<template>// 这里是自定义的表格组件<tableref="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-selectElSelect,{// 这里绑定了form.status并给了默认值modelValue: form.status || '正常',// 这里是更新绑定的值'onUpdate:modelValue': (value) => {form.status = value;},class: 'full-width',},// 这里是子节点，有多个el-option则用[]表示[h(ElOption, {// 这里是el-option的labellabel: t('umsUser.status.normal'),// 这里是el-option的valuevalue: '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绑定进行绑定

这篇关于前端表格使用vxe-table进行渲染，使用el-select进行选择合适的条件查询，且给el-select默认赋值及使用i18n进行翻译的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---