早上剛上班，產(chǎn)品就朝我工位走了過來，一看大事不好，肯定又是來提需求的！

產(chǎn)品：做一個表格，要實現(xiàn)雙擊編輯的功能

我：做不了

產(chǎn)品：老板提的

我：好的，可以做

老板提的不能做也滴做??

申明：項目基于Vue+Ant Design實現(xiàn)

表格雙擊編輯單元格

想要實現(xiàn)雙擊編輯單元格，先開發(fā)一個簡單的表格（廢話）

 <a-table :columns="columns" :data-source="data">     
 </a-table>

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
  },
]
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: 'nice',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: 'loser',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: 'teacher',
  },
]

現(xiàn)在實現(xiàn)Name列可雙擊編輯的功能，設(shè)置Name列可以自定義

  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    scopedSlots:{customRender:'name'}
  },

在表格中自定義Name列的內(nèi)容

<template slot="name" slot-scope="record">
      <editable-cell :record="record" @changeAll="onCellChange" />
</template>

其中editable-cell是需要我們自己寫的一個子組件

雙擊編輯表格單元格的原理就是，默認展示表格內(nèi)容，雙擊單元格之后展示一個input框，input框也綁定了這個值，input框失去焦點之后，并將這個值傳回給父組件

子組件editable-cell

我們首先需要實現(xiàn)的就是將我們的原本表格中的內(nèi)容展示出來，表格展示的內(nèi)容是存在于父組件中的。

這里就涉及到了父子組件通信，子組件接收父組件傳遞的內(nèi)容是通過props

  props: {
    record: Object
  },

獲取到表格內(nèi)容之后，然后就是表格內(nèi)容的展示

    <div v-show="editable == false" @dblclick="edit">
      {{ value || ' ' }}
    </div>  
    //其中value的值為
    value: this.record.name,

editable初始值是false，默認展示的就是value，value的值就是我們從父組件獲取的表格的值text，
并且這個div塊綁定了一個雙擊函數(shù)edit

 edit() {
      this.editable = true
      this.$nextTick(() => {
        this.$refs.myInput.focus()
      })
    },

edit函數(shù)是將editable的值設(shè)置為true，設(shè)置為true之后展示的是input輸入框，并設(shè)置input框自動獲取焦點。這里需要注意的是直接寫this.$refs.myInput.focus()不會生效，需要設(shè)置等下次DOM更新之后再觸發(fā)這個事件。

    <div v-show="editable" >
      <a-input
        v-model="value"
        @pressEnter="check"
        @blur="check"
        size="small"
        ref="myInput"
      />
    </div>

input框綁定了兩個事件，失去焦點和按下enter鍵。觸發(fā)的是一個函數(shù)check函數(shù)，將editable的值設(shè)置為false，單元格展示的就是值而不再是輸入框，這里我們需要將修改的值傳回給父組件，子向父傳遞是通過$emit

 check() {
      this.editable = false
      this.record.name=this.value
      this.$emit('changeAll', this.value)
    }  

子組件觸發(fā)了changAll函數(shù)

 onCellChange(record) {
      console.log(record,'123')
      console.log(this.data,'999')
    },

這里我們打印了record和我們表格的數(shù)組，對應(yīng)數(shù)據(jù)都成功作出修改

添加新行

<div class="operate">
     <a-button type="dashed" style="width: 100%" icon="plus" @click="addList">添加</a-button>
</div>

一個實現(xiàn)思路是往數(shù)組中添加一行新的空數(shù)據(jù)

  addList() {
      this.data1.push({
        key: this.data1.length +1,
        name: '' ,
        age: '',
        address: '',
        tags: '',
      })
      console.log(this.data1)
    },

添加的新數(shù)據(jù)我們也可以進行雙擊編輯功能

文字提示

如果我們想要實現(xiàn)文字提示功能，并且想要多行內(nèi)容展示，需要使用a-tooltip組件

  <a-tooltip placement="topLeft">
       <template #title>
            Name: {{ record.name }},<br />
            Key: {{ record.key }}
        </template>
       <editable-cell :record="record" @changeAll="onCellChange" />
  </a-tooltip>

多行內(nèi)容展示自定義template

到此所有的需求都實現(xiàn)了，本人蒟蒻一枚，大佬請劃走(輕點噴)…文章來源地址http://www.zghlxwxcb.cn/news/detail-500051.html

到了這里，關(guān)于Ant Design Vue實現(xiàn)表格雙擊編輯、添加新行、文字提示的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！