如何实现可编辑span的placeholder的功能

<template>

  <div class="userCenter">

    用户中心

    <el-table :data="tableData" border style="width: 100%">

      <el-table-column prop="date" label="日期" width="180"></el-table-column>

      <el-table-column prop="name" label="姓名" width="180"></el-table-column>

      <el-table-column prop="address" label="地址"></el-table-column>

      <el-table-column label="输入框" prop="test">

        <template slot-scope="scope">

          <span

            :contenteditable="true"

            style="display:block;height:30px;width:100%;"

            placeholder="请输入"

          >{{scope.row.test}}</span>

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>

 

<script>

export default {

  name: "UserCenter",

  data() {

    return {

      tableData: [

        {

          date: "2016-05-02",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄",

          test: 1

        },

        {

          date: "2016-05-04",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1517 弄",

          test: 1

        },

        {

          date: "2016-05-01",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1519 弄",

          test: 1

        },

        {

          date: "2016-05-03",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1516 弄",

          test: 1

        }

      ]

    };

  },

  mounted: function() {}

};

</script>

<style>

.userCenter {

  width: 100%;

  height: 500px;

  text-align: center;

  margin-top: 10%;

}

span[contenteditable]:empty:before {

  content: attr(placeholder);

  color: #cccccc;

}

span[contenteditable]:focus {

  content: none;

}

</style>