# 表格整行编辑功能

暂无数据

在组件中需配置需要编辑先设置属性：isEditCell:true
需要显示添加按钮设置属性：isEdit:true
需要显示保存按钮设置属性：isShowFooterBtn:true
column 每项中新增需要的configEdit属性其值如下:
label: placeholder 显示
editComponent :组件名称可直接指定全局注册的组件，也可引入'element/abtd'如：'a-button/el-button'
bind: 第三方 UI 的 Attributes，如 el-input 中的 clearable 清空功能
event: 触发 handleEvent 事件的标志
type: 下拉或者复选框显示（select-arr/select-obj/checkbox）
list: 下拉选择数据源名称
arrLabel: type:select-arr 时对应显示的中文字段
arrKey: type:select-arr 时对应显示的数字字段

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        isEdit
        isEditCell
        isShowFooterBtn
        :table="editConfig.table"
        :columns="editConfig.table.columns"
        :listTypeInfo="editConfig.listTypeInfo"
        @handleEvent="handleEvent"
        @save="save"
        @add="editAdd"
        cellEditBtnTxt="新增一行"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script>
export default {
  name: 'TtableEditCell',
  data() {
    return {
      editConfig: {
        table: {
          border: true,
          firstColumn: { type: 'index', label: '序列' }, // 显示序列号
          data: [],
          columns: [
            { prop: 'name', label: '姓名', minWidth: '160', configEdit: { label: '姓名', type: 'input', editComponent: 'el-input' } },
            {
              prop: 'hobby',
              label: '爱好',
              minWidth: '180',
              headerRequired: true,
              configEdit: {
                label: '爱好',
                type: 'select-arr',
                editComponent: 'el-select',
                list: 'hobbyList',
                event: 'hobbyList',
                arrLabel: 'label',
                arrKey: 'value'
              }
            },
            {
              prop: 'number',
              label: '计数器',
              minWidth: '320',
              configEdit: {
                label: '计数器',
                type: 'inputNumber',
                bind: { min: 0, max: 99 },
                editComponent: 'el-input-number'
              }
            },
            {
              prop: 'checkbox',
              label: '复选框',
              minWidth: '520',
              configEdit: {
                label: '复选框',
                type: 'checkbox',
                list: 'hobbyList',
                editComponent: 'el-checkbox-group'
              }
            }
          ],
          // 表格内操作列
          operator: [
            {
              type: 'danger',
              text: '删除',
              fun: this.editDel
            }
          ],
          // operatorConfig: {
          //   fixed: 'right'
          // }
        },
        // 下拉选择项
        listTypeInfo: {
          hobbyList: [
            { label: '吉他', value: '0' },
            { label: '看书', value: '1' },
            { label: '美剧', value: '2' },
            { label: '旅游', value: '3' },
            { label: '音乐', value: '4' }
          ]
        }
      }
    }
  },
  methods: {
    editAdd() {
      console.log('新增')
      const objAdd = {
        name: '',
        hobby: '',
        checkbox: [],
        number: 0
      }
      this.editConfig.table.data.push(objAdd)
    },
    editDel(item, index, row) {
      row.splice(index, 1)
      console.log('删除', item, row, index)
    },
    // 编辑每一项的change事件
    handleEvent(type, val) {
      console.log('handleEvent', type, val)
    },
    save(data) {
      const flag = data.some(item => item.hobby === '')
      if (flag) {
        this.$message.error('爱好不能为空')
        return
      }
      console.log('保存', data)
    },
  }
}
</script>

← 单元格编辑保存单行操作行拖拽排序 →