# 单元格编辑保存单行操作

主要在configEdit中配置bind(函数返回整条数据)
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        :isShowPagination="false"
        :table="table"
        :columns="table.columns"
        :listTypeInfo="table.listTypeInfo"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script>
import cellEditData from "./cellEditData.json"
export default {
  data() {
    return {
      table: {
        data: [],
        operator: [
          {
            text: '编辑',
            disabled: false,
            fun: this.edit,
            noshow: [{ key: 'isPrint', val: [false] }, { key: 'isEdit', val: [true] }]
          },
          {
            text: '保存',
            fun: this.creatTag,
            disabled: false,
            show: { key: 'isEdit', val: [true] }
          },
          {
            text: '取消',
            disabled: false,
            fun: this.cancelEdit,
            show: { key: 'isEdit', val: [true] }
          }
        ],
        // 操作列样式
        operatorConfig: {
          fixed: 'right', // 固定列表右边（left则固定在左边）
          width: 120,
          label: '操作'
        },
        columns: [
          {
            prop: 'area', label: '装炉位置', minWidth: '120', canEdit: true,
            configEdit: {
              label: '装炉位置',
              type: 'select-arr',
              editComponent: 'el-select',
              list: 'furnaceAreaList',
              arrLabel: 'dictLabel',
              arrKey: 'dictValue',
              bind: (scope) => {
                return {
                  disabled: scope.row.isDisabled ? false : true,
                }
              }
            },
          },
          {
            prop: 'layer', label: '装炉层', minWidth: '120', canEdit: true, configEdit: {
              label: '装炉层',
              type: 'select-arr',
              editComponent: 'el-select',
              list: 'furnaceLayerList',
              arrLabel: 'dictLabel',
              arrKey: 'dictValue',
              bind: (scope) => {
                return {
                  disabled: scope.row.isDisabled ? false : true,
                }
              }
            }
          },
          {
            prop: 'isTail', label: '是否尾包', minWidth: '100', canEdit: true,
            configEdit: {
              label: '是否尾包',
              type: 'checkbox',
              editComponent: 'el-checkbox',
              bind: (scope) => {
                return {
                  disabled: scope.row.isDisabled ? false : true,
                }
              }
            }
          },
          {
            prop: 'packageNumStart', label: '开始编号', minWidth: '100', canEdit: true,
            configEdit: {
              label: '开始编号',
              type: 'input',
              editComponent: 'el-input',
              bind: (scope) => {
                return {
                  disabled: scope.row.isDisabled ? false : true,
                }
              }
            }
          },
          {
            prop: 'packageNumEnd', label: '结束编号', minWidth: '100', canEdit: true,
            configEdit: {
              label: '结束编号',
              type: 'input',
              editComponent: 'el-input',
              bind: (scope) => {
                return {
                  disabled: scope.row.isDisabled ? false : true,
                }
              }
            }
          },
          { prop: 'startDate', label: '生产日期', minWidth: '100' },
          { prop: 'endDate', label: '出炉日期', minWidth: '100' },
          {
            prop: 'singleWeight', label: '单包重量（吨）', minWidth: '100', canEdit: true,
            configEdit: {
              label: '单包重量（吨）',
              type: 'input',
              editComponent: 'el-input-number',
              event: 'singleWeight',
              bind: (scope) => {
                return {
                  controls: false,
                  disabled: scope.row.isDisabled ? false : true,
                  min: 1,
                  max: 9999,
                  precision: 2
                }
              }
            }
          }
        ],
        listTypeInfo: {
          furnaceAreaList: [
            {
              dictLabel: '炉头',
              dictValue: '1'
            },
            {
              dictLabel: '炉中',
              dictValue: '2'
            },
            {
              dictLabel: '炉尾',
              dictValue: '3'
            },
          ],
          furnaceLayerList: [
            {
              dictLabel: '上层',
              dictValue: '1'
            },
            {
              dictLabel: '中层',
              dictValue: '2'
            },
            {
              dictLabel: '下层',
              dictValue: '3'
            },
          ],
        },
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      let res = cellEditData
      if (res.success) {
        this.table.data = res.data
      }
    },
    // 生成标签明细
    creatTag(item) {
      console.log('保存', item)
      this.$set(item, 'isEdit', false)
      this.$set(item, 'isDisabled', false)
      item.isPrint = true
      this.table.operator.map((val) => {
        if (val.text == '编辑') {
          val.disabled = false
        }
      })
    },
    // 编辑
    edit(row) {
      this.table.data.map((item) => {
        this.$set(item, 'isEdit', false)
      })
      // 禁用操作按钮
      this.table.operator.map((item) => {
        if (item.text == '编辑') {
          item.disabled = true
        }
      })
      this.$set(row, 'isEdit', true)
      this.$set(row, 'isDisabled', true)
    },
    // 取消
    cancelEdit(row) {
      // 取消操作按钮禁用
      this.table.operator.map((item) => {
        if (item.text == '编辑') {
          item.disabled = false
        }
      })
      this.$set(row, 'isEdit', false)
      this.$set(row, 'isDisabled', false)
    },
  }
}
</script>
← 单个单元格编辑 ElementUi 组件的事件使用表格整行编辑功能 →