ele-table表格列表内双击编辑部分信息的示例代码(el-table组件同理)

<!-- 机动车巡查 -->
<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')">自动录入设置</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="请输入内容"
          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)">下发</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('请先编辑完当前数据再编辑下一个')
      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>

import { gettoken } from '@/utils/auth'
const sffxwtoptions = [
  {
    value: 'yes',
    text: '是'
  },
  {
    value: 'no',
    text: '否'
  }
]
export const searchdesc = (_this) => {
  return {
    jczmc: {
      type: 'input',
      label: '监测站名称',
      attrs: {
        clearable: true
      },
      layout: 8
    },
    fzjg: {
      type: 'input',
      label: '盟市',
      attrs: {
        clearable: true
      },
      layout: 8
    },
    sffxwt: {
      type: 'select',
      label: '是否发现问题',
      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: '机动车状态',
        layout: 8
      },
      syr: {
        type: 'input',
        label: '所有人',
        layout: 8
      },
      sfzmhm: {
        type: 'input',
        label: '身份证号',
        layout: 8
      },
      lxfs: {
        type: 'input',
        label: '联系方式',
        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: '所有权',
        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: '申请状态',
        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: '申请转入部门',
        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: '下发部门',
        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('最多允许传一个文件')
          }
        }
      }
    }
  }
}

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: '监测站名称'
    },
    {
      prop: 'hphm',
      label: '车牌号'
    },
    {
      prop: 'cllx',
      label: '车辆类型'
    },
    {
      prop: 'sffxwt',
      label: '是否发现问题'
    },
    {
      prop: 'czwt',
      label: '存在问题'
    },
    {
      prop: 'ccrq',
      label: '抽查日期'
    },
    {
      prop: 'operation',
      label: '操作',
      fixed: 'right',
      width: 150
    }
  ]
}