el-table横向展示插槽数据改怎么拿

211 阅读1分钟

问题问题,有大哥来帮忙

 <el-table :data="AllData" style="width: 100%">
 <el-table-column prop="title" label="成长等级"></el-table-column>
 <el-table-column v-for="(item, index) in allList" :prop="item.key" :key="index" :label="item.feeName">
 </el-table-column>
 </el-table>

data

 AllData: [],
 allList: []

methods

   setData() {
            var getData = [                {                    title: '所需成长值',                    data: [                        {                            feeName: 'VIP1',                            num: 0                        },                        {                            feeName: 'VIP2',                            num: 100                        },                        {                            feeName: 'VIP3',                            num: 1200                        },                        {                            feeName: 'VIP4',                            num: 2400                        },                        {                            feeName: 'VIP5',                            num: 4800                        },                        {                            feeName: 'VIP6',                            num: 8000                        },                        {                            feeName: 'VIP7',                            num: 20000                        },                        {                            feeName: 'VIP8',                            num: 40000                        }                    ]
                },
                {
                    title: '等级勋章',
                    data: [
                        {
                            feeName: 'VIP1',
                            num: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-pre.ivsky.com%2Fimg%2Ftupian%2Fpre%2F201907%2F13%2Fweimei_hupo-004.jpg&refer=http%3A%2F%2Fimg-pre.ivsky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670206067&t=f84c51864108f0cb0d7087778c8f253b'
                        },
                        {
                            feeName: 'VIP2',
                            num: 'https://pics0.baidu.com/feed/b2de9c82d158ccbfa5925ba78736db36b035417c.jpeg?token=11f3cb6ac3b38ca43290840af27e2e79'
                        },
                        {
                            feeName: 'VIP3',
                            num: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-06-02%2F5ed5e76ea3d84.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670206067&t=b4c5cf51b8835b8e519477ce989859fb'
                        },
                        {
                            feeName: 'VIP4',
                            num: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F5462f41a2e5b1.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670206067&t=fe6b1dd3f36b3005962416de8e4d96ea'
                        },
                        {
                            feeName: 'VIP5',
                            num: 'https://img2.baidu.com/it/u=444659446,2346358900&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800'
                        },
                        {
                            feeName: 'VIP6',
                            num: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.ssfiction.com%2Fwp-content%2Fuploads%2F2020%2F08%2F20200811_5f327b40b742c.jpg&refer=http%3A%2F%2Fwww.ssfiction.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670206067&t=4dd515b3a2053e4b7a2fd2acd5b3a71c'
                        },
                        {
                            feeName: 'VIP7',
                            num: 'https://img2.baidu.com/it/u=569593503,3907913200&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800'
                        },
                        {
                            feeName: 'VIP8',
                            num: 'https://img2.baidu.com/it/u=569593503,3907913200&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800'
                        }
                    ]
                }
            ];
            for (var i in getData) {
                var a = {};
                var b = [];
                a['title'] = getData[i].title;
                var x = 0;

                getData[i].data.forEach(function (e) {
                    x += 1;

                    b.push({ feeName: e.feeName, key: 'num' + x });
                    a['num' + x] = e.num;
                });
                this.AllData.push(a);
                this.allList = b;
            }
        }

做了数据处理,然后不知道怎么用插槽给把等级勋章的内容换成图片