智能助手表单显示错误的问题

src/components/pages/test/choseCheck/csvTableView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="txtView" v-loading="loading">
 		<el-table :data="tableData" border style="width: 100%;height: 100%;" :header-cell-style="{ background: '#f1f1f1', fontSize: '16px' }" :fit="true" >
-			<el-table-column  :fixed="[].includes(index)" :label="item.label" :prop="item.label" v-for="(item,index) in columnList" :key="item.label+'_'+'index'"></el-table-column>
+			<el-table-column  :fixed="[].includes(index)" :label="item.label" :prop="item.prop" v-for="(item,index) in columnList" :key="item.label+'_'+index"></el-table-column>
 		</el-table>
 		<!-- <div class="tv_content" v-text="content"></div> -->
 	</div>
@@ -54,44 +54,45 @@ export default {
     url: {
       type: String,
       default: ""
-    },
+    }
   },
-	data(){
-		return{
-			content:"",
-			loading:true,
-			tableData:[],
-			columnList:[],
-		}
-	},
-	methods: {
-		getTxtContent() {
-			if(!this.url)return;
-			this.loading = true;
-			getFile(this.url).then(res=>{
-				this.loading = false;
-				let tableDataObj = this.formatCSVToTable(res.data);
-				this.tableData = tableDataObj;
-				let column = [];
-				for(let i in tableDataObj[0]){
-				  column.push({
-						label:i,
-						prop:i
+  data() {
+    return {
+      content: "",
+      loading: true,
+      tableData: [],
+      columnList: []
+    };
+  },
+  methods: {
+    getTxtContent() {
+      if (!this.url) return;
+      this.loading = true;
+      getFile(this.url).then(res => {
+        this.loading = false;
+        let tableDataObj = this.formatCSVToTable(res.data);
+				console.log(tableDataObj)
+        this.tableData = tableDataObj.result;
+        let column = [];
+				tableDataObj.header.forEach((item,index)=>{
+					column.push({
+						label:item,
+						prop: `header_${index}`
 					})
-				}
-				this.columnList = column;
-				this.content = res.data;
-			})
-		},
-		formatCSVToTable(str){
+				})
+        this.columnList = column;
+        this.content = res.data;
+      });
+    },
+    formatCSVToTable(str) {
       const result = [];
       const jsonObj = str.split("\n");
       let arrHeader = [];
       for (const i in jsonObj) {
-        if (typeof jsonObj[i] === 'string' && jsonObj[i].length > 0) {
+        if (typeof jsonObj[i] === "string" && jsonObj[i].length > 0) {
           const row = `${jsonObj[i]}`;
           if (row.trim().length > 0) {
-            const kv = jsonObj[i].split(',');
+            const kv = jsonObj[i].split(",");
             if (i == 0) {
               // 获取column表头
               arrHeader = kv;
@@ -99,17 +100,17 @@ export default {
               const obj = {};
               for (let index = 0; index < arrHeader.length; index++) {
                 // 组装表格数据
-                const name = String(arrHeader[index]);
-                if (!arrHeader[index]) continue
+                const name = `header_${index}`
+                if (!arrHeader[index]) continue;
                 if (!obj[name]) {
                   try {
                     if (kv[index]) {
                       obj[name] = String(kv[index]);
                     } else {
-                      obj[name] = '';
+                      obj[name] = "";
                     }
                   } catch (err) {
-                    obj[name] = '';
+                    obj[name] = "";
                   }
                 }
               }
@@ -118,41 +119,41 @@ export default {
           }
         }
       }
-      return result
+      return {result:result,header:arrHeader};
+    },
+  },
+  watch: {
+    url(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.getTxtContent();
+      }
     }
-	},
-	watch:{
-		url(newVal,oldVal){
-			if(newVal!==oldVal){
-				this.getTxtContent();
-			}
-		}
-	},
-	mounted(){
-		this.getTxtContent();
-	}
+  },
+  mounted() {
+    this.getTxtContent();
+  }
 };
 </script>
 
 <style scoped>
-.txtView{
-	width: 100%;
-	height: 100%;
-	box-sizing: border-box;
-	background-color: #ececec;
-	padding: 0px 0px;
+.txtView {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: #ececec;
+  padding: 0px 0px;
 }
 
-.tv_content{
-	width: 100%;
-	height: 100%;
-	box-sizing: border-box;
-	background-color: #fff;
-	overflow: auto;
-	word-wrap: break-word;
-	border-radius: 3px;
-	white-space: pre;
-	box-sizing: border-box;
-	padding: 10px;
+.tv_content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  overflow: auto;
+  word-wrap: break-word;
+  border-radius: 3px;
+  white-space: pre;
+  box-sizing: border-box;
+  padding: 10px;
 }
 </style>