vue模板el-table样式

最新推荐文章于 2025-10-15 11:26:33 发布

原创最新推荐文章于 2025-10-15 11:26:33 发布 · 815 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中处理el-table组件的数据，包括将JSON格式的字符串转换为所需的数据格式，并展示了相关的源代码示例，同时提及了样式设置的相关内容。

部分代码，需要传入数组，

            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="IOPSRead" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="IntranetBandwidth" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="BPSWrite" label="地址">
                    </el-table-column>
                </el-table>
            </el-main>




<script>
    new Vue({
        el: '#app',

        data:
            {
                tableData: []
            },
        mounted() {
            axios
                .get('/app/api/555')
                .then(response => (this.tableData = response.data))
        }
    })
</script>

views里的json格式string转换为对应格式

def alidata(req):
    t=json.loads(ali.apali())
    return JsonResponse(t['MonitorData']['InstanceMonitorData'], safe=False)

以下嫖的= =

字符串转为JSON
源代码:

import json
 
str = '''
[{
    "name": "Tom",
    "gender": "male"
}, {
    "name": "Jack",
    "gender": "male"   
}]
'''
#将字符串转为json格式
print(type(str))
data = json.loads(str)
print(type(data))
print(data)

JSON转为字符串
源代码:

import json
 
data = [{
    "name": "Tom",
    "gender": "male"
}, {
    "name": "杰克",
    "gender": "男"   
}]
 
#将json格式转为字符串
print(type(data))
str = json.dumps(data, indent=2) #indent=2按照缩进格式
print(type(str))
print(str)

#保存到json格式文件
with open('data.json', 'w', encoding='utf-8') as file:
    file.write(json.dumps(data, indent=2, ensure_ascii=False)) #ensure_ascii=False可以消除json包含中文的乱码问题