Vue + element-ui 后台数据返回前台显示

在原来ASP.NET 网站项目上做的扩展，完整的Vue项目用不了，只能用Vue + element-ui + axios。

前台C#：

<el-button type="primary" plain icon="el-icon-refresh" size="small" @click="refreshForm()">刷新</el-button>

<el-table ref="multipleTable" border :data="tableData" :cell-style="cellStyle" tooltip-effect="dark" style="width: 100%; font-size: 12px;margin-top: 20px" :header-cell-style="{'background-color': 'rgb(238, 241, 246)','color': '#409EFF','border-bottom': '1px #409EFF solid','text-align':'center'}"
            @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
            <el-table-column prop="date" label="申请日期" sortable width="220" column-key="date"><template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
           <el-table-column label="申请人" width="240"><template slot-scope="scope">{{ scope.row.name }}</template></el-table-column>
           <el-table-column label="单据状态" width="240"><template slot-scope="scope">{{ scope.row.checkstate }}</template></el-table-column>
           <el-table-column prop="reviewprocess" label="单据完整流程(鼠标移上可见)" style="color: #409EFF" width="600">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="bottom">
                        <div style="text-align: left">
                          <div class="radio"> 排序：
                            <el-radio-group v-model="reverse">
                                <el-radio :label="true">倒序</el-radio>
                                <el-radio :label="false">正序</el-radio>
                            </el-radio-group>
                          </div>
                            <el-timeline :reverse="reverse">
                                <el-timeline-item v-for="(activity, index) in checkstates" :key="index" :timestamp="activity.timestamp">
                                    {{activity.content}}
                                </el-timeline-item>
                            </el-timeline>
                          </div>
                        <div slot="reference">{{ scope.row.reviewprocess }}</div>
                    </el-popover>
                </template>
             </el-table-column>

             <el-table-column label="操作" width="360">
              <template slot-scope="scope">
                  <el-button type="text" @click.native.prevent="deleteRow(scope.$index, tableData,scope.row)" size="small">取消</el-button>
                  <el-button type="text" @click="sealFormVisible = true" size="small">详情</el-button> 
              </template>
            </el-table-column>
          </el-table>

后台：

/// <summary>
        /// 获取表单状态列表
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public static string getSealyInfo(string content)
        {
            Connection connection = new Connection();
            SqlConnection conn = connection.getConnection();
           // string sql = "select id as 'index',CONVERT(varchar(100), ApplyDate, 23) as date  , ApplyUser as name,  IsTake as checkstate, ////ApplyFileName as reviewprocess from SealApplyTbl  ";
            //0:用印申请单
            string sql = "select  Form_ID as 'index', CONVERT(varchar(100), ApplyDate, 23) as date , ApplyUserName as name,case Status when '0' then '已提交' when '1' then '审核中' when '2' then '已审核' when '3' then '已驳回' ELSE '已作废' END as checkstate,case Status when '0' then '单据已提交，等待审核' when '1' then '单据审核中' when '2' then '单据已审核' when '3' then '单据已驳回' ELSE '单据已作废' END as reviewprocess from CheckStatusTest where Form_Type=0";
            //强大的SqlDataAdapter 
            System.Data.SqlClient.SqlDataAdapter adapter = new SqlDataAdapter(sql, conn);

            DataSet ds = new DataSet();
            //Fill 方法会执行一系列操作 connection.open command.reader 等等
            //反正到最后就把 sql语句执行一遍,然后把结果集插入到 ds 里.
            adapter.Fill(ds);

            DataTable dt = ds.Tables[0];
            string json = "";
            //JsonConvert.SerializeObject(dt, Formatting.Indented);//查询结果转json
            if (dt.Rows.Count > 0)
            {
               // json  = JsonConvert.SerializeObject(dt);
                json = ToJsonUtil.CreateJsonStr(dt);
            }
            return json;
        }

Vue.js：

 //刷新
      refreshForm() {
        var _this4 = this;
        var senddata = new Object();
        axios.post('Main.aspx/getSealyInfo',{'content': JSON.stringify(senddata)})
        .then(function(resp){
                 if(resp.status === 200 && resp.statusText === "OK"){
                      //将后台传过来的json字符串转换成数组
                      _this4.tableData=eval('(' + resp.data.d + ')');
                  }
                }).catch(resp => {
                    _this4.$message({
                            type: 'info',
                            message: '请求失败!'+resp.status+','+resp.statusText
                        }); 
            });
      }

主要是这句：_this4.tableData=eval('(' + resp.data.d + ')');

2.json字符串转换为json对象

1、使用eval

result = eval('(' + jsonstr + ')'); // jsonstr是json字符串

参考：https://blog.csdn.net/qq_42345108/article/details/101696032