<> Preview the front end of the file
Omit click button click trigger showdialogview() Method code
* The first method
* First template Add one to the list input frame , Bind a variable of type string
* write showdialogview() method
* Call the background method , If not null（ The data returned in the background is returned line by line ）, Just use it for loop , Add to a variable . <template> <div
class="content"> <!-- File Preview --> <el-dialog title=" Data preview "
:visible.sync="dialogvisibleview" > <el-input type="textarea" :rows="10"
placeholder="" v-model="dataview"> </el-input> </el-dialog> </div> </template>
<script> import api from '../../api/api' import $ from 'jquery'; import axios
from 'axios'; export default { name: "DataFile", inject: ['reload'], data(){
return { dialogvisibleview: false, // File Preview dataview: '' } }, methods:{ // Preview Area
showdialogview(id) { this.dataview =''; var dataView = new FormData; // var
num=20; dataView.append("id",id); api.getDataDetail(dataView).then((response)
=> response.json()) .then((data) => { if(data!=null){ this.dialogvisibleview =
!this.dialogvisibleview; //alert(data.data[0]); for (var
i=0;i<=data.data.length-1;i++){ this.dataview+=data.data[i]+"\n"; } } }); } },
created: function () { console.log('cteated Hook execution ...'); } } </script>
* The second method ：
* You can add a table label , stay tbody Use in label v-html Binding variables , such , The tags in the string can be displayed
* Because the data returned by the interface given by the background is a row of data corresponding to a subscript in the array , Split each row of data into a string array , Then put it in the cell , It's more neat to show , You can also add styles .
<template> <div class="content"> <!-- Preview modal box --> <el-dialog title=" File content preview "
:visible.sync="previewVisible" modal-append-to-body="false"
append-to-body="true" style="height: 100%;"width="80%"> <p
style="color:red"> If visualization , Please select a numeric column </p> <div id="modalContent" style="height:
600px;overflow:scroll;overflow-x:auto;overflow-y:auto "> <table id="box-table"
style="border-collapse:collapse;height:60px;"> <tbody id="table_body"
v-html="datafileView"></tbody></table> </div> </el-dialog> </div> </template>
<script> import api from '../../api/api' import $ from 'jquery'; import axios
from 'axios'; export default { name: "DataFile", inject: ['reload'], data(){
return { previewVisible:false, // Preview the datafileView:'', // Preview table } },
methods:{ // Open preview modal box openPreview (id){ this.previewVisible = true;
this.viewData(id); }, // Query preview in the background viewData (fid) { this.datafileView=""; var
dataView = new FormData; dataView.append("id",fid);
api.getDataDetail(dataView).then((response) => response.json()) .then((data) =>
{ var viewDataString="<tr>"; var dataArray =
((String)(data.data[0])).split(","); for(var i =0;i<dataArray.length;i++){
viewDataString=viewDataString+"<td style='text-align:center;width:10%'><input
type='radio' name='tableheader' value='"+i+"' @click='f1()' /></td>"; }
viewDataString = viewDataString+"</tr><tr
style='border-color:#1eb8f7;border-bottom-style:solid;border-width:1px'>";
for(var i =0;i<dataArray.length;i++){ viewDataString = viewDataString+"<th
style='text-align:center;width:10%'>"+dataArray[i]+"</th>"; } viewDataString =
viewDataString+"</tr>"; console.log(data.data.length); for(var
x=1;x<data.data.length;x++){ var dataArray =
((String)(data.data[x])).split(","); viewDataString = viewDataString+"<tr>";
for(var i =0;i<dataArray.length;i++){ viewDataString = viewDataString+"<td
style='text-align:center;width:15%'>"+dataArray[i]+"</td>"; } viewDataString =
viewDataString+"</tr>"; } this.datafileView =viewDataString;
console.log(this.datafileView ); }); } }, created: function () {
console.log('cteated Hook execution ...'); } } </script>
shortcoming ： use v-html, Even if the tag is displayed in the browser , But the method inside can't be used , The methods in it fail .
For solutions, please check other articles in this blog .
Technology