Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

希望优化Protable的columns Prop Enum 接口获取数据函数! #423

Closed
dmskys opened this issue May 2, 2024 · 2 comments
Closed

希望优化Protable的columns Prop Enum 接口获取数据函数! #423

dmskys opened this issue May 2, 2024 · 2 comments

Comments

@dmskys
Copy link

dmskys commented May 2, 2024

目前表格有多个下拉列表搜索选项的情况下,服务端是通过一个接口返回所有的Options选项值,类似这种返回:
{"status":[{"label":"启用","value":1},{"label":"禁用","value":0}],”gender“:[{"label":"男","value":1},{"label":"女","value":0}]}
但是发现ProTable不支持这种方式。只能一个选项一个请求api获取赋值,希望作者改进一下,没必要多次请求服务器。
希望在渲染列表前先请求options的数据,然后通过函数去获取对应的enmu数组信息。


const options = ref<ResOptions>();
async function initData() {
	const { data } = await getOptionsApi();
	options.value = data;
}

function getStatusOption(){
return options.value?.status;
}

function getGenderOption(){
return options.value?.gender;
}

const columns: ColumnProps[] = [
{
		prop: "status",
		label: "用户状态",
		enum: getStatusOption(),
		search: { el: "tree-select", props: { filterable: true } },
		fieldNames: { label: "label", value: "value" },
		render: (scope: { row: Account.ResAccount }) => {
			return (
				<>
					{BUTTONS.value.status ? (
						<el-switch
							model-value={scope.row.status}
							active-text={scope.row.status ? "启用" : "禁用"}
							active-value={1}
							inactive-value={0}
							onClick={() => changeStatus(scope.row)}
						/>
					) : (
						<el-tag type={scope.row.status ? "success" : "danger"}>{scope.row.status ? "启用" : "禁用"}</el-tag>
					)}
				</>
			);
		}
	},
	{
		prop: "gender",
		label: "性别",
		enum: getGenderOption(),
		search: { el: "select", props: { filterable: true } },
		fieldNames: { label: "label", value: "value" }
	}
];
@coder-sunshine
Copy link

coder-sunshine commented May 9, 2024

我也有这样的返回格式,是给` enum 设置了 空数组,然后接口拿到数据 通过 prop 做 key 统一处理的

onMounted(async () => {
  const { data } = await getReportInitDataApi()
  // 不需要从 initData 接口里面获取
  const notInitData = ['useUnit', 'auditUser']
  columns.forEach(col => {
    if (col.prop && data[col.prop] && !notInitData.includes(col.prop)) {
      col.enum = data[col.prop].map(item => ({ label: item.text, value: item.id }))
    }
  })
})
let columnsData: ColumnProps[] = [
  { type: 'selection', fixed: 'left', width: 70 },
  { prop: 'operation', label: '操作', width: props.pageStatus !== 4 ? 220 : 100, fixed: 'left' },
  {
    prop: 'type',
    label: '报告类型',
    width: 200,
    enum: [],
    search: {
      el: 'select',
    },
  },
  {
    prop: 'process',
    label: '办理环节',
    enum: [],
    width: 100,
    search: {
      el: 'select',
    },
  },
  {
    prop: 'testResult',
    label: '检测结论',
    width: 100,
    enum: [],
    search: {
      el: 'select',
    },
  },
]

@HalseySpicy
Copy link
Owner

Enum 支持动态更新的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants