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
    }

    代码粘贴过去,直接可以使用。

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些