Django返回element-ui可编辑表格时不显示数据

目的和做法

想实现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表现如下：

img

在表格中加入了一个双向绑定的输入框来实现编辑的功能，但同时在模板内又加入了一个 string 类型的显示内容，这就导致点击行时只有 string 类型的元素才会展示。

解决方法是将 string 类型的元素移出模板，只保留输入框，并在输入框外部用普通的文本元素展示。修改后的代码如下：

<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 v-model="scope.row.date"></el-input>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template scope="scope">
          <el-input v-model="scope.row.name"></el-input>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template scope="scope">
          <el-input v-model="scope.row.address"></el-input>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
    </el-table>
  </template>
</div>

在每个值绑定的el-input元素和元素外加上template标签，template标签中放置一个slot-scope属性，可以在这里抽离出用于展示数据的标签。