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

最新推荐文章于 2025-06-17 09:31:56 发布

web_hj

最新推荐文章于 2025-06-17 09:31:56 发布

阅读量1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： element-ui

本文链接：https://blog.youkuaiyun.com/web_hj/article/details/103457662

element-ui 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了一个项目需求，即在Element UI的el-table中实现数据展示与编辑功能。作者通过封装一个可编辑表格组件，实现了表格数据的便捷修改，并指出此组件可在多个地方复用。文章展示了组件的调用方式和定义方法，为读者提供了一个简单易懂的实现思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果图：

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

先看下使用页面的调用

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>

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