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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章