快捷導(dǎo)航

ele-table表格列表內(nèi)雙擊編輯部分信息的示例代碼(el-table組件同理)

更新時間：2024年11月04日 11:59:51 作者：Fighting_p

本文介紹如何在ele-table組件中實現(xiàn)雙擊編輯功能,通過雙擊表格列表內(nèi)需要編輯的區(qū)域,可以展示輸入框或日期選擇器進行數(shù)據(jù)修改,修改完成后,通過按回車鍵或點擊確認按鈕提交修改數(shù)據(jù),感興趣的朋友一起看看吧

說明

ele-table 為公司內(nèi)部組件，重點看【主要代碼】部分代碼

ele-table表格列表內(nèi)：雙擊需要編輯的區(qū)域，編輯部分信息

實現(xiàn)

雙擊需要編輯的數(shù)據(jù)，展示輸入框/日期選擇，
展示輸入框：修改完之后，按鍵盤回車鍵，提交修改數(shù)據(jù)展示日期選擇：修改完之后，點擊 √ 按鈕，提交修改數(shù)據(jù)

頁面展示

代碼

<!-- 機動車巡查 -->
<template>
  <div class="container">
    <ele-form-search
      class="container_search"
      :form-data="searchData"
      :form-desc="searchDesc"
      @search="fetchData"
    />
    <div class="container_btn">
      <el-button class="el-icon-plus" type="primary" size="mini" @click="operationHandler('add')">
        錄入
      </el-button>
      <el-button size="mini" @click="operationHandler('auto')">自動錄入設(shè)置</el-button>
      <a href="/downloadCenter/核查處理通知書.docx" rel="external nofollow" >
        <el-button size="mini">整改說明書下載</el-button>
      </a>
    </div>
    <ele-table
      class="contariner_table"
      :table-options="options"
      :columns-options="columns"
      :page.sync="searchData.page"
      :page-size.sync="searchData.rows"
      :total="total"
      :show-fixed-control="false"
    >
      <template #sffxwt="{ row }">
        <el-switch
          v-model="row.sffxwt"
          active-color="#13ce66"
          active-value="yes"
          inactive-value="no"
          @change="sffxwtChange($event, row)"
        >
        </el-switch>
      </template>
      <!-- 【主要代碼】 start -->
      <template #czwt="{ row }">
        <el-input
          v-if="row.czwtIsEdit"
          v-model="editValue"
          placeholder="請輸入內(nèi)容"
          size="mini"
          @keyup.enter.native="dbClickSubmit('czwt', row)"
        ></el-input>
        <span v-else @dblclick="dbClickEdit('czwt', row)">{{ row.czwt }}</span>
      </template>
      <template #ccrq="{ row }">
        <div v-if="row.ccrqIsEdit" class="ccrq">
          <el-date-picker
            v-model="editValue"
            type="date"
            placeholder="選擇日期"
            size="mini"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
          <el-button
            type="text"
            class="el-icon-check"
            @click="dbClickSubmit('ccrq', row)"
          ></el-button>
        </div>
        <span v-else @dblclick="dbClickEdit('ccrq', row)">{{ row.ccrq }}</span>
      </template>
      <!-- 【主要代碼】 end -->
      <template #operation="{ row }">
        <el-button type="text" @click="detailHandler(row)">查看</el-button>
        <el-button
          :disabled="row.sffxwt === 'no'"
          type="text"
          @click="operationHandler('upload', row)"
          >上傳</el-button
        >
        <el-button type="text" @click="operationHandler('issued', row)">下發(fā)</el-button>
      </template>
    </ele-table>
    <DetailDialog ref="DetailDialogRef" @update="fetchData" />
    <OperationDialog ref="OperationDialogRef" @update="fetchData" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { listPage, update } from '@/api/neimeng/vehicle-inspection-feedback'
import { searchDesc } from './constant/formList'
import { columns } from './constant/columns'
import DetailDialog from './components/DetailDialog'
import OperationDialog from './components/OperationDialog'
export default {
  name: 'VehicleInspection',
  components: { DetailDialog, OperationDialog },
  filters: {},
  data() {
    return {
      searchData: {
        page: 1,
        rows: 10
      },
      tableData: [],
      total: 0,
      editValue: ''
    }
  },
  computed: {
    ...mapGetters(['glbmList']),
    searchDesc() {
      return searchDesc(this)
    },
    options() {
      return {
        data: this.tableData
      }
    },
    columns() {
      return columns(this)
    }
  },
  watch: {},
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      let { time, ...params } = this.searchData
      if (time && time.length) {
        params.kssj = time[0]
        params.jssj = time[1]
      }
      listPage(params).then((res) => {
        this.common.CheckCode(res, null, () => {
          this.tableData = res.data.rows || []
          this.total = res.data.total || 0
        })
      })
    },
    sffxwtChange(val, row) {
      update({
        sffxwt: val,
        id: row.id
      }).then((res) => {
        this.$common.CheckCode(res, null, () => {
          this.fetchData()
        })
      })
    },
    /** ** 【主要代碼】 start ****/
    getIndex(rowData) {
      return this.tableData.findIndex((item) => item.id === rowData.id)
    },
    dbClickEdit(key, rowData) {
      const isCanEdit = this.tableData.some((item) => {
        if (item.ccrqIsEdit || item.czwtIsEdit) return true
      })
      if (isCanEdit) return this.$message.error('請先編輯完當(dāng)前數(shù)據(jù)再編輯下一個')
      this.editValue = key === 'ccrq' ? new Date(rowData[key]) : rowData[key]
      this.tableData[this.getIndex(rowData)][key + 'IsEdit'] = true
      this.renderDom()
    },
    dbClickSubmit(key, rowData) {
      update({
        [key]: this.editValue,
        id: rowData.id
      }).then((res) => {
        this.$common.CheckCode(res, '修改成功', () => {
          this.fetchData()
          this.tableData[this.getIndex(rowData)][key + 'IsEdit'] = false
          this.renderDom()
          this.editValue = ''
        })
      })
    },
    renderDom() {
      this.tableData.push({})
      this.tableData.pop()
    },
    /** ** 【主要代碼】 end ****/
    detailHandler(rowData) {
      this.$refs.DetailDialogRef.open(rowData)
    },
    operationHandler(type, rowData) {
      this.$refs.OperationDialogRef.open(type, rowData)
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: calc(100% - 52px);
  &_search {
    padding: 10px;
    margin-bottom: 10px;
    ::v-deep .el-form-item__content {
      text-align: left;
    }
  }
  &_btn {
    background-color: #fff;
    padding: 10px 10px 0;
    text-align: left;
    .el-icon-plus {
      margin-bottom: 10px;
    }
    a {
      margin-left: 10px;
    }
  }
  .contariner_table {
    height: calc(100% - 100px);
    ::v-deep .ele-table-pagination {
      position: fixed;
      bottom: 0;
      justify-content: center;
      z-index: 10;
    }
    .upload-demo {
      display: inline-block;
    }
    .ccrq {
      width: 100%;
      display: inline-block;
      ::v-deep .el-date-editor {
        width: calc(100% - 22px);
      }
      .el-icon-check {
        padding: 0;
        cursor: pointer;
        font-size: 20px;
      }
    }
  }
}
.blue-theme {
  .container_btn {
    background-color: #293f60;
    color: #fff;
  }
}
.night-theme {
  .container_btn {
    background-color: #1a2331;
    color: #fff;
  }
}
</style>

./constant/formList.js

import { getToken } from '@/utils/auth'
const sffxwtOptions = [
  {
    value: 'yes',
    text: '是'
  },
  {
    value: 'no',
    text: '否'
  }
]
export const searchDesc = (_this) => {
  return {
    jczmc: {
      type: 'input',
      label: '監(jiān)測站名稱',
      attrs: {
        clearable: true
      },
      layout: 8
    },
    fzjg: {
      type: 'input',
      label: '盟市',
      attrs: {
        clearable: true
      },
      layout: 8
    },
    sffxwt: {
      type: 'select',
      label: '是否發(fā)現(xiàn)問題',
      attrs: {
        clearable: true
      },
      layout: 8,
      options: sffxwtOptions
    },
    time: {
      type: 'daterange',
      label: '巡查時間',
      attrs: {
        clearable: true,
        valueFormat: 'yyyy-MM-dd'
      },
      layout: 8
    }
  }
}
export const detailFormDesc = (_this) => {
  return {
    carInfo: {
      hpzl: {
        type: 'select',
        label: '號牌種類',
        layout: 8,
        render: (h, content, value) => {
          return <span>{_this.common.filter_dic('mon_business_hpzl', value)}</span>
        }
      },
      hphm: {
        type: 'input',
        label: '號牌號碼',
        layout: 8
      },
      jdczt: {
        type: 'input',
        label: '機動車狀態(tài)',
        layout: 8
      },
      syr: {
        type: 'input',
        label: '所有人',
        layout: 8
      },
      sfzmhm: {
        type: 'input',
        label: '身份證號',
        layout: 8
      },
      lxfs: {
        type: 'input',
        label: '聯(lián)系方式',
        layout: 8
      },
      zsxxdz: {
        type: 'input',
        label: '住址',
        layout: 8
      },
      zzxxdz: {
        type: 'input',
        label: '暫住地址',
        layout: 8
      },
      ccdjrq: {
        type: 'input',
        label: '初次登記日期',
        layout: 8
      },
      yxqz: {
        type: 'input',
        label: '有效期止',
        layout: 8
      },
      qzbfqz: {
        type: 'input',
        label: '強制報廢日期止',
        layout: 8
      },
      yqjyqzbfqz: {
        type: 'input',
        label: '逾期檢驗強制報廢期止',
        layout: 8
      },
      syq: {
        vif: _this.drawerType === 'detail',
        type: 'input',
        label: '所有權(quán)',
        layout: 8,
        render: (h, content, value) => {
          const cur = sffxwtOptions.find((i) => i.value === value)
          return <span>{(cur && cur.text) || '暫無'}</span>
        }
      },
      sqztmc: {
        vif: _this.drawerType === 'detail',
        type: 'input',
        label: '申請狀態(tài)',
        layout: 8
      },
      bz: {
        vif: _this.drawerType === 'detail',
        type: 'input',
        label: '車輛備注信息',
        layout: 8
      }
    },
    applyInfo: {
      clbz: {
        type: 'input',
        label: '車輛備注信息',
        layout: _this.drawerType === 'apply' ? 24 : 8,
        default: _this.carInfo.bz,
        disabled: true
      },
      [_this.drawerType === 'apply' ? 'zrbm' : 'zrbmmc']: {
        type: 'select',
        label: '申請轉(zhuǎn)入部門',
        layout: _this.drawerType === 'apply' ? 24 : 8,
        required: true,
        options: _this.glbmOptions,
        prop: {
          value: 'value',
          text: 'label'
        },
        attrs: {
          clearable: true
        }
      },
      bz: {
        type: 'textarea',
        label: '申請備注',
        layout: _this.drawerType === 'apply' ? 24 : 8,
        attrs: {
          clearable: true
        }
      },
      cjr: {
        vif: ['examineDetail', 'examine'].includes(_this.drawerType),
        type: 'input',
        label: '申請人',
        layout: 8
      },
      sqbm: {
        vif: ['examineDetail', 'examine'].includes(_this.drawerType),
        type: 'input',
        label: '申請人部門',
        layout: 8
      },
      sqsj: {
        vif: ['examineDetail', 'examine'].includes(_this.drawerType),
        type: 'input',
        label: '申請時間',
        layout: 8
      }
    },
    examineInfo: {
      clyj: {
        type: 'textarea',
        label: '審核備注',
        layout: _this.drawerType === 'examine' ? 24 : 16,
        attrs: {
          clearable: true
        }
      },
      clr: {
        vif: ['examineDetail'].includes(_this.drawerType),
        type: 'input',
        label: '審核人',
        layout: 8
      },
      clsj: {
        vif: ['examineDetail'].includes(_this.drawerType),
        type: 'input',
        label: '審核時間',
        layout: 16
      }
    }
  }
}
export const operationFormDesc = (_this) => {
  return {
    auto: {
      lrpl: {
        type: 'input',
        label: '',
        labelWidth: 0,
        layout: 24
      },
      lrsl: {
        type: 'input',
        label: '',
        labelWidth: 0,
        layout: 24
      }
    },
    issued: {
      xfbm: {
        type: 'select',
        label: '下發(fā)部門',
        layout: 24,
        options: _this.glbmOptions,
        prop: {
          value: 'value',
          text: 'label'
        },
        attrs: {
          clearable: true
        }
      }
    },
    upload: {
      zgsms: {
        type: 'upload',
        label: '上傳文件',
        layout: 24,
        attrs: {
          // accept: 'image/*',
          label: '上傳文件',
          multiple: false,
          autoUpload: true,
          limit: 1,
          // listType: 'picture-card',
          blockSize: 'middle',
          params: { relativePath: 'NMXCFile/' },
          uploadAPI: '/supervise_basic/upload/oss/fileupload',
          token: getToken(),
          beforeUpload: _this.beforeUploadHandler,
          'on-exceed': () => {
            _this.$message('最多允許傳一個文件')
          }
        }
      }
    }
  }
}

./constant/columns.js

import moment from 'moment'
export const columns = (_this) => {
  return [
    {
      type: 'index',
      label: '序號',
      index: (index) => {
        return (_this.searchData.page - 1) * _this.searchData.rows + index + 1
      }
    },
    {
      prop: 'fzjg',
      label: '盟市'
    },
    {
      prop: 'lsh',
      label: '流水號'
    },
    {
      prop: 'jczmc',
      label: '監(jiān)測站名稱'
    },
    {
      prop: 'hphm',
      label: '車牌號'
    },
    {
      prop: 'cllx',
      label: '車輛類型'
    },
    {
      prop: 'sffxwt',
      label: '是否發(fā)現(xiàn)問題'
    },
    {
      prop: 'czwt',
      label: '存在問題'
    },
    {
      prop: 'ccrq',
      label: '抽查日期'
    },
    {
      prop: 'operation',
      label: '操作',
      fixed: 'right',
      width: 150
    }
  ]
}

到此這篇關(guān)于ele-table表格列表內(nèi)，雙擊編輯部分信息（el-table組件同理）的文章就介紹到這了,更多相關(guān)ele-table表格雙擊編輯信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: