elmentui实现vue表格属性可编辑

最新推荐文章于 2023-05-24 14:09:24 发布

还没想好叫啥~

最新推荐文章于 2023-05-24 14:09:24 发布

阅读量243

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52613927/article/details/128563789

版权

利用插槽实现列属性可编辑:

1.计划入库数量的一列单独写插槽，列属性写的循环 col

<el-table
          size='small'
          :data="detailList"
          style="width: 100%"
          border
          highlight-current-row
          @cell-click="handleTableChange"
        >
        <template v-for="(cell, index) in col">
          <el-table-column
            show-overflow-tooltip
            v-if="cell.label != '计划入库数量'"
            :key="index"
            :prop="cell.prop"
            :label="cell.label"
          ></el-table-column>
          <el-table-column 
            show-overflow-tooltip 
            :key="index"
            :prop="cell.prop"
            :label="cell.label"
            v-if="cell.label == '计划入库数量'">
            <template slot-scope="scope">
              <el-input v-model="scope.row.ATTR_40591021" @click="handleEdit(scope.$index, scope.row)" placeholder="请输入数量"></el-input>
            </template>
            
          </el-table-column>
        </template>
</el-table>

2.初始化col数组，即列属性

  mounted() {
    this.col = [
      {"label":"物料分类","prop":"ATTR_40591019",width:"",value:"",requiredField:true},
      {"label":"物料编码","prop":"ATTR_40591011",width:"",value:"",requiredField:false},
      {"label":"物料名称","prop":"ATTR_40591012",width:"",value:"",requiredField:false},
      {"label":"物料规格","prop":"ATTR_40591013",width:"",value:"",requiredField:false},
      {"label":"采购单位","prop":"ATTR_40591014",width:"",value:"",requiredField:false},
      {"label":"标准计数单位","prop":"ATTR_40591017",width:"",value:"",requiredField:false},
      {"label":"标准计数值","prop":"ATTR_40591018",width:"",value:"",requiredField:false},
      {"label":"计划入库数量","prop":"ATTR_40591021",width:"",value:"",requiredField:false}
    ];
  },