element中可以輸入table表格（雙擊可以修改輸入）

寫一個可以雙擊修改，可輸入，雙擊確定的table表單，主要是對插槽的使用，比較簡單，直接落代碼，不解釋

　　　結構樣式代碼：

　　　　　　　　

    <el-table :data="tableData" border style="width: 60%;margin:0 auto" @row-dblclick="dbclick" >
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <el-form :model="scope.row">
            <el-form-item size="mini" label-width="66px">
              <el-input v-if="scope.row.isOK" v-model="scope.row.name" style="width:100%;hight:100%"></el-input>
              <span v-else>{{scope.row.name}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
          <template slot-scope="scope">
          <el-form :model="scope.row">
            <el-form-item size="mini" label-width="66px">
              <el-input v-if="scope.row.isOK" v-model="scope.row.address" style="width:100%;hight:100%"></el-input>
              <span v-else>{{scope.row.address}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>

　　　　數據代碼：

　　　　　　　　

   tableData: [
        {
          date: "2016-05-02",
          isOK: true,
          name: "張三",
          address: "上海市普陀區金沙江路 1518 弄"
        },
           {
          date: "2016-05-02",
          isOK: false,
          name: "李四",
          address: "上海市普陀區金沙江路 1518 弄"
        }
      ]

　　　　雙擊代碼：

　　　　　　　　

  dbclick(row, event, column){
      row.isOK =!row.isOK
    }

　　　　代碼粘貼過去，直接可以使用。

　　　如果對你有幫助，你口袋也充裕，並且你也樂意，那就請作者喝杯飲料吧