欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue el-table实现行内编辑功能

程序员文章站 2022-06-25 12:58:52
最近做一个vue前后端分离的项目,前端框架用element ui,在 使用 el-table 的过程中,需要实现行内编辑,效果大概是这样: 分为下面几个步骤: (1) 自定义...

最近做一个vue前后端分离的项目,前端框架用element ui,在 使用 el-table 的过程中,需要实现行内编辑,效果大概是这样:

vue el-table实现行内编辑功能

分为下面几个步骤:

(1) 自定义 el-table 的表头(即添加 “新增” 按钮):

<el-table :data="proptabledata.col.filter(data => handleadd || data.name.tolowercase().includes(handleadd.tolowercase()))"
   highlight-current-row
   border>
</el-table>
<template slot="header"
  slot-scope="scope">
  <el-button v-model="handleadd"
    size="mini"
    type="success"
    round
    plain
    @click="handleadd(scope.$index, scope.row)">{{ $t('common.add') }}</el-button>
</template>

表头自定义了一个“添加”按钮,点击 el-table 动态添加一行。

(2) el-table 动态添加一行:

let row = {
  code: '',
  maxvalue: '',
  minvalue: '',
  name: '',
  valuetype: 'string',
  id: '',
  typeid: '',
  warning: false,
  isset: true
}
this.proptabledata.col.push(row)

vue 数据变化驱动 dom 进行更新,给 table 绑定的数据 proptabledata.col 添加一个元素,则表格会添加一行。

proptabledata.sel 保存当前行数据:

this.proptabledata.sel = row

(3) el-table 动态删除一行:

子组件中触发父组件的 delete 事件:

this.$emit('delete', row.id)

(4)当前行状态判断,即是否处于编辑状态,控制表格每一行的按钮元素的移除与插入:

<template slot-scope="scope">
   <el-button size="mini"
      type="primary"
      round
      plain
      v-if="!scope.row.isset"
      @click="valchange(scope.row,scope.$index,true)">{{ $t('common.edit') }}</el-button>
   <el-button size="mini"
      type="primary"
      round
      plain
      v-else
      @click="valchange(scope.row,scope.$index,true)">{{ $t('common.save') }}</el-button>
   <el-button size="mini"
      type="danger"
      round
      plain
      v-if="!scope.row.isset"
      @click="handledelete(scope.$index, scope.row)">{{ $t('common.delete') }}</el-button>
   <el-button size="mini"
      type="danger"
      round
      plain
      v-else
      @click="valchange(scope.row,scope.$index,false)">{{ $t('common.cancel') }}</el-button>
</template>

上面代码中,通过 v-if=“scope.row.isset” 来判断当前行是否处于编辑状态。

如果当前行处于编辑状态,则按钮为“保存”和“取消”,此时可对当前行进行保存和取消操作,且不能新增,除非先保存当前行;

如果当前行处于非编辑状态,则按钮为“编辑”和“删除”状态,此时可对当前行进行编辑和删除操作。

这样,就可以实现 el-table 行内编辑的需求。

vue el-table实现行内编辑功能

完整版代码如下:

<template>
 <el-dialog class="uiot-dialog"
    width="900px"
    :visible.sync="isshow"
    :before-close="beforeclose"
    :close-on-click-modal="false"
    :title="$t('basicdata.device.propdlg.dlgtitle')"
    @open="open">
 <el-table :data="proptabledata.col.filter(data => handleadd || data.name.tolowercase().includes(handleadd.tolowercase()))"
    highlight-current-row
    border>
  <el-table-column label="no."
      type="index"
      align="center"
      width="50"></el-table-column>
  <el-table-column :label="$t('basicdata.device.propdlg.code')">
  <template slot-scope="scope">
   <span v-if="scope.row.isset">
   <el-input size="mini"
      v-model="scope.row.code"></el-input>
   </span>
   <span v-else>{{ scope.row.code }}</span>
  </template>
  </el-table-column>
  <el-table-column :label="$t('basicdata.device.propdlg.name')">
  <template slot-scope="scope">
   <span v-if="scope.row.isset">
   <el-input size="mini"
      v-model="scope.row.name"></el-input>
   </span>
   <span v-else>{{ scope.row.name }}</span>
  </template>
  </el-table-column>
  <el-table-column :label="$t('basicdata.device.propdlg.minvalue')">
  <template slot-scope="scope">
   <span v-if="scope.row.isset">
   <el-input size="mini"
      v-model="scope.row.minvalue"></el-input>
   </span>
   <span v-else>{{ scope.row.minvalue }}</span>
  </template>
  </el-table-column>
  <el-table-column :label="$t('basicdata.device.propdlg.maxvalue')">
  <template slot-scope="scope">
   <span v-if="scope.row.isset">
   <el-input size="mini"
      v-model="scope.row.maxvalue"></el-input>
   </span>
   <span v-else>{{ scope.row.maxvalue }}</span>
  </template>
  </el-table-column>
  <el-table-column :label="$t('basicdata.device.propdlg.valuetype')">
  <template slot-scope="scope">
   <span v-if="scope.row.isset">
   <el-select size="mini"
      v-model="scope.row.valuetype"
      :placeholder="$t('common.pleselect')">
    <el-option v-for="item in valtypeoptions"
       :key="item.value"
       :label="item.label"
       :value="item.value"></el-option>
   </el-select>
   </span>
   <span v-else>{{ scope.row.valuetype }}</span>
  </template>
  </el-table-column>
  <el-table-column :label="$t('basicdata.device.propdlg.warning')">
  <template slot-scope="scope">
   <span v-if="scope.row.isset">
   <el-select v-model="scope.row.warning"
      size="mini">
    <el-option v-for="item in warnoptions"
       :key="item.value"
       :label="item.label"
       :value="item.value"></el-option>
   </el-select>
   </span>
   <span v-else>{{ scope.row.warning===true?'是':'否' }}</span>
  </template>
  </el-table-column>
  <el-table-column align="center"
      width="170px">
  <template slot="header"
     slot-scope="scope">
   <el-button v-model="handleadd"
      size="mini"
      type="success"
      round
      plain
      @click="handleadd(scope.$index, scope.row)">{{ $t('common.add') }}</el-button>
  </template>
  <template slot-scope="scope">
   <el-button size="mini"
      type="primary"
      round
      plain
      v-if="!scope.row.isset"
      @click="valchange(scope.row,scope.$index,true)">{{ $t('common.edit') }}</el-button>
   <el-button size="mini"
      type="primary"
      round
      plain
      v-else
      @click="valchange(scope.row,scope.$index,true)">{{ $t('common.save') }}</el-button>
   <el-button size="mini"
      type="danger"
      round
      plain
      v-if="!scope.row.isset"
      @click="handledelete(scope.$index, scope.row)">{{ $t('common.delete') }}</el-button>
   <el-button size="mini"
      type="danger"
      round
      plain
      v-else
      @click="valchange(scope.row,scope.$index,false)">{{ $t('common.cancel') }}</el-button>
  </template>
  </el-table-column>
 </el-table>
 </el-dialog>
</template>

<script>
import { open } from 'fs'
import '@/styles/uiot.scss'

const defaultprop = {
 code: '',
 maxvalue: '',
 minvalue: '',
 name: '',
 valuetype: 'string',
 id: '',
 typeid: '',
 warning: false
}

export default {
 props: {
 isshow: boolean,
 onerow: {
  type: array,
  default: function() {
  return defaultprop
  }
 }
 },
 data() {
 return {
  proptabledata: {
  sel: null, // 选中行
  col: []
  },
  warnoptions: [
  {
   value: true,
   label: '是'
  },
  {
   value: false,
   label: '否'
  }
  ],
  valtypeoptions: [
  {
   value: 'string',
   label: 'string'
  },
  {
   value: 'int',
   label: 'int'
  },
  {
   value: 'double',
   label: 'double'
  },
  {
   value: 'boolean',
   label: 'boolean'
  },
  {
   value: 'date',
   label: 'date'
  }
  ]
 }
 },
 created() {},
 methods: {
 open() {
  this.proptabledata.col = this.onerow
  this.proptabledata.col.map(i => {
  i.isset = false
  })
  console.log('open', this.proptabledata.col)
 },
 // 添加
 handleadd() {
  for (let i of this.proptabledata.col) {
  if (i.isset) {
   return this.message(
   this.$t('basicdata.device.propdlg.plesave'),
   'warning'
   )
  }
  }
  let row = {
  code: '',
  maxvalue: '',
  minvalue: '',
  name: '',
  valuetype: 'string',
  id: '',
  typeid: '',
  warning: false,
  isset: true
  }
  this.proptabledata.col.push(row)
  this.proptabledata.sel = row
 },
 //修改
 valchange(row, index, qx) {
  console.log('edit', this.proptabledata)
  //点击修改,判断是否已经保存所有操作
  for (let i of this.proptabledata.col) {
  console.log('i.isset', i.isset, i.id, row.id)
  if (i.isset && i.id != row.id) {
   this.message(this.$t('basicdata.device.propdlg.plesave'), 'warning')
   return false
  }
  }
  //是否是取消操作
  if (!qx) {
  console.log('qx', this.proptabledata.sel.id)
  if (!this.proptabledata.sel.id) {
   this.proptabledata.col.splice(index, 1)
  }
  return (row.isset = !row.isset)
  }
  //提交数据
  if (row.isset) {
  console.log('this.proptabledata.sel', this.proptabledata.sel)
  const v = this.proptabledata.sel
  // 必填项判断
  if (v.code == '' || v.name == '') { 
   this.message(this.$t('common.pleenter'), 'warning')
  } else {
   this.$emit('confirm', this.proptabledata.sel)
   row.isset = false
  }
  } else {
  this.proptabledata.sel = row
  row.isset = true
  }
 },
 // 删除
 handledelete(index, row) {
  this.$emit('delete', row.id)
 },
 beforeclose() {
  this.$emit('cancel')
 },
 message(msg, type) {
  this.$message({ type: type ? type : 'info', message: msg })
 }
 }
}
</script>

<style lang="scss">
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。