Element ui可编辑表格

2019-07-15_173152.jpg

可直接引用哦

<template>
  <el-table
    ref="multipleTable"
    border
    stripe
    :data="tableData"
    tooltip-effect="dark"
    @selection-change="selsChange"
    style="width: 100%;margin-top: 30px"
  >
    <el-table-column type="selection"  width="70" @selection-change="selsChange"></el-table-column>
    <el-table-column label="序号" type="index" width="70"></el-table-column>
    <el-table-column prop="name" label="属性字段" >
      <template slot-scope="scope">
        <el-input v-model="scope.row.name"  class="input"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="format" label="字段格式" width="200">
      <template slot-scope="scope">
        <el-input v-model="scope.row.format"  class="input" ></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="alias" label="字段别名">
      <template slot-scope="scope">
        <el-input v-model="scope.row.alias"  class="input" ></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="coreElement" label="是否为核心要素" width="200">
      <template slot-scope="scope">
        <el-input v-model="scope.row.coreElement"  class="input" ></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="associatedData" label="关联数据">
      <template slot-scope="scope">
        <el-input v-model="scope.row.associatedData"  class="input"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [{
          name: "1",
          format: "1",
          alias: "1",
          coreElement: "1",
          associatedData: "1"
        },{
          name: "2",
          format: "2",
          alias: "2",
          coreElement: "2",
          associatedData: "2"
        },{
          name: "3",
          format: "3",
          alias: "3",
          coreElement: "3",
          associatedData: "3"
        }],
        sels: [], //勾选复选框时获取整行数据
      }
    },
    methods: {
      //勾选时获得勾选数据
      selsChange (sels) {
        this.sels = sels
      }
    }
  }
</script>

**注意！！这里的style就是这样的写法哦，这样才能改变element ui 里的样式**
<style>
  /*//修改input的样式，为了不覆盖本组件其他处的样式，需要自定义一个类名*!*/
  .input .el-input__inner{
    border:none;
    background: transparent;
    text-align: center;
  }
  .el-table th>.cell{
    text-align: center;
  }
  .el-table .cell{
    text-align: center;
  }
</style>
<style scoped>

</style>