【JavaScript 】多层数组嵌套取其中某个值组成新的数组-动态渲染table头部内容

161 阅读1分钟

一:多层数组嵌套取其中某个值组成新的数组

List:
	[
		{
		id: 1,
		name: "haha",
		tag_list: {
					0:{
						id: 89
						is_checked_arr: [259, 260]
						is_checked_str: ""
					},
					1:{
						id: 90
						is_checked_arr: [259, 260]
						is_checked_str: ""
					},
					2:{
						id: 12
						is_checked_arr: [259, 260]
						is_checked_str: ""
					},
				},
		tag_subject_id: 1
		},
		{
		id: 2,
		name: "xixi",
		tag_list: {
					0:{
						id: 89
						is_checked_arr: [259, 260]
						is_checked_str: ""
					},
					1:{
						id: 90
						is_checked_arr: [259, 260]
						is_checked_str: ""
					},
					2:{
						id: 12
						is_checked_arr: [259, 260]
						is_checked_str: ""
					},
				},
		tag_subject_id: 2
		},
	]
  • 获取到所有的
is_checked_arr: [259, 260]
is_checked_str: ""

并组成新的数组啊

const res = tagList.value.map((item) => {
            return Object.values(item.tag_list).map((item2) => item2.is_checked_arr).flat();
          })
          .flat();
const res2 = tagList.value.map((item) => {
            return Object.values(item.tag_list).map((item2) => item2.is_checked_str);
          }).flat();
const params = {
          tags: [...res, ...res2].filter((i) => i),
        };

二:数组对象里面有未知某个值组成的数组,想要拿出来组成新的一个数组

  • 类似于一个table数组,我只有a,b,c去渲染三列header
  • 但是我a里面可能有年龄
  • b里面可能有年龄,性别
  • c可能有爱好
  • 我想把所有abc下存在的属性 ,放到table表格头部动态渲染

template里面的table内容

<Table
      :dataSource="getTableData(item.part_sku_list)"
      :columns="getHeader(item.part_sku_list)"
       :pagination="false">
      <template #img="{ text }">
           <img style="width: 100px" :src="text" />
      </template>
</Table>

script里面的处理table头部动态渲染的内容

const getTableData = (value) => {
        return value.map((item) => {
          const { sku_value_list, ...other } = item;
          const obj = other;
          sku_value_list.forEach((sku) => {
            obj[`${sku.prod_sku_key_id}`] = sku.prod_sku_value;
          });
          return obj;
        });
      };

      const getHeader = (value) => {
        const list = value
          .map((item) => item.sku_value_list)
          .flat()
          .map((item) => {
            return `${item.prod_sku_key_id},${item.sku_key}`;
          });
        const header = [...new Set(list)];

        const arr = header
          .map((item) => {
            const i = item.split(',');
            return { dataIndex: i[0], title: i[1] };
          })
          .concat(columns3.value);
        return [
          {
            title: 'sku编号',
            dataIndex: 'sku_number',
            key: 'sku_number',
          },
          ...arr,
        ];
      };