前端element框架之动态渲染后端传递的数据

最进在接触一些前端，在使用vue 的element ui 构建表格的时候，出现一些问题，其中一个问题就是接收到后端的数据，但是不能渲染，或者渲染失败。所以我整理总结一下主要的问题和解决方法。

<el-table :data="tableData" height="400" border style="width: 700">
   <el-table-column align="center" prop="file_name" label="日期" min-width="90/100">
   </el-table-column>
   <el-table-column prop="status" label="状态" min-width="10/100">    
   </el-table-column>
</el-table>

var vm = new Vue({
	el: '#app',
	data() {
		return {
			car_index: '',   
            car_toindex: '',  
            time: '',  
            data_time: { 
                startTime: '',
                endTime: '',
            }, 
            jsons_data: '', 
            tableData: [],  
            options: {{ options|safe }}, 
		}
	},
	methods:{
		    searchvideos(){ // 搜索视频功能
            var _this = this
            
            this.car_toindex = this.car_index 
            this.data_time.startTime = this.time[0]
            this.data_time.endTime = this.time[1]

            this.jsons_data = {
                car_toindex: this.car_toindex,
                start_data: this.data_time.startTime,
                end_data: this.data_time.endTime
            }
			// 这种方法不要用，我也不知道为什么，_this.tableData = res.data，这一步就是不能成功
            // $.ajax({
            //     async: false,
            //     url: '/test/getvideos/',
            //     type: 'post',
            //     dataType: 'json',
            //     data: this.jsons_data,
                
            //     success: function (res) {
						_this.tableData = res.data
            //     }
            // })
            axios.post('/test/getvideos/', this.jsons_data)
                .then(function (res) {
                    console.log(res);
                    _this.tableData = res.data
                })
                .catch(function (error) {
                    console.log(error)
                })
        },
	}
})

我是清茶！欢迎你和我一起讨论，我们下期见。