目的和做法
想实现element-ui表格可编辑。做法是el-input和span标签，通过css来控制显示状态。
现象
本地html文件可实现单击行，出现el-input标签；但是通过Django返回该html文件后，表格数据不显示，只有单击某一行时，某一行数据才显示。
请各位佬大帮我看看，谢谢啦!
代码如下和现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
.tb-edit .el-input {
display: none
}
.tb-edit .current-row .el-input {
display: block
}
.tb-edit .current-row .el-input+span {
display: none
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<div id="app">
<template>
<el-table
:data="tableData"
class="tb-edit"
highlight-current-row
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
<template scope="scope">
<el-input type="text" v-model="scope.row.date"> </el-input>
<span>{{scope.row.date}}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
<template scope="scope">
<el-input type="text" v-model="scope.row.name"> </el-input>
<span>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column
prop="address"
label="地址">
<template scope="scope">
<el-input type="text" v-model="scope.row.address"> </el-input>
<span>{{scope.row.address}}</span>
</template>
</el-table-column>
</el-table>
</template>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
tableData: [{
'date': '2016-05-02',
'name': '王小虎',
'address': '上海市普陀区金沙江路 1518 弄'
},{
'date': '2017-05-02',
'name': '王小虎',
'address': '上海市普陀区金沙江路 1518 弄'
}]
}
},
})
</script>
</body>
</html>
Django返回的html表现如下：
