element ui el-table 将表格单元格改为可编辑

项目需求  要求表格展示数据  并且 在表格中可以随意修改数据  而且多处地方使用到这种可以编辑的表格

效果图：

思路：将表格改为可以编辑 ；    将表格封装在一个组件  然后在需要的地方调用这个组件（实现重复调用）

先看下使用页面的调用

template：  
<editTable
        ref="editTable"
        :tableData="tableData"
        :height="tableHeight"
        :disabled="disabled"
        :tableHeader="tableHeader"
        @onTableBtn="onTableBtn"
        @handleEdit="handleEdit"/>


data ：
tableHeight:800 ,//表格的高度
disabled：false,   //控制表格是否可编辑    
tableData: [],//表格要展示的数据   请求数据 将数据给到他

//表格的列    name:数据中对应的key   title:列名  type:单元格中的输入类型   data:下拉框中的数据
tableHeader: [   
   {name: 'depot_name', title: '仓库', width: '150', type: "select", data: []},
   {name: 'no', title: '商品编号', width: '150', disabled: true, type: "text"},
   {name: 'goods_name', title: '商品名称', width: '150', disabled: true, type: "text"},
   {name: 'spec', title: '规格', width: '150', disabled: true},
   {name: 'qty', title: '数量', width: '150'},
   {name: 'price_text', title: '单价', width: '150', disabled: true},
   {name: 'amount', title: '金额', width: '150'},
   {name: 'btn', title: '操作', width: '100', type: 'btn', text: '删除'},
],




methods:
onTableBtn(row){   //按钮返回的事件

}

handleEdit(){   //单元格中数据改变 返回的事件

}

关键来了   看下组件怎么定义的

<template>
  <el-table :data="tableData"      //表格数据
            class="tb-edit"
            border
            stripe
            :height="height"
            :highlight-current-row="!disabled"//行的单选 根据传的disabled判断是否允许单选
            @row-click="handleCurrentChange">
    <el-table-column      
      v-if="showIndex"
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      v-for="(item,index) in tableHeader"    //tableHeader  列
      :key="index"
      :prop="item.name"
      :headerAlign="'center'"
      :align="item.align"
      :label="item.title"
      :fixed="item.fixed"    //列的固定
      :width="item.width"
      show-overflow-tooltip>
      <template slot-scope="scope">
        //根据不同类型显示不同的输入框 可以是下拉选择 /按钮 /输入框 还可以自己定义更多
        <el-select v-if="item.type === 'select'"  size="small" v-model="scope.row[item.name]"
                   @change="handleEdit(scope.$index, scope.row)"
                   placeholder="请选择内容"
                   value="">
          <el-option
            v-for="option in item.data"
            :disabled="disabled"
            :value="option.name"
            :key="option.name"
            :label="option.name"/>
        </el-select>
        <el-button v-else-if="item.type === 'btn'" :disabled="disabled"  @click="onSelected(scope.$index,scope.row)" type="primary" size="small">
          {{item.text}}
        </el-button>
        <el-input v-else size="small" :disabled="item.disabled || disabled" v-model="scope.row[item.name]" placeholder="请输入内容"
                  @change="handleEdit(scope.$index, scope.row)"/>
        <span>{{scope.row[item.name]}}</span>   
      </template>
    </el-table-column>

  </el-table>
</template>

<script>
  export default {
    name: "edit_table",
    props: {
      "tableData": Array,
      "showIndex": {      //是否显示首列 index
        type: Boolean,
        default: true
      },
      "tableHeader": Array,
      "height": Number,
      "stripe": {             //是否为斑马纹table
        type: Boolean,
        default: true
      },
      "disabled":Boolean
    },
    methods: {
      handleCurrentChange(row, event, column) {
        //console.log(row, event, column, event.currentTarget)
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.$emit("handleEdit", {index: index, row: row})
      },
      onSelected:function(index,row){
        console.log(row);
        this.$emit("onTableBtn",{index: index, row: row})
      }
    }
  }
</script>

<style scoped>
   //当表格选中的时候 会自动添加  .current-row  这些代码很好理解了


  .tb-edit .el-input, .tb-edit .el-select {
    display: none
  }

  .tb-edit .current-row .el-input, .tb-edit .current-row .el-select {
    display: block
  }


    
  .tb-edit .current-row .el-input + span, .tb-edit .current-row .el-select + span {
    display: none
  }
</style>

到这里就完了 看上去还是很简单的  在这个基础上可以随意改变自己的表格输入框样式