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

2024-01-08 18:41:42

前端表格使用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绑定进行绑定

文章来源:https://blog.csdn.net/m0_50298323/article/details/135462430
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。