vue+iview 實(shí)現(xiàn)可編輯表格的示例代碼

更新時(shí)間：2018年10月31日 10:32:15 作者：Catkin

這篇文章主要介紹了vue+iview 實(shí)現(xiàn)可編輯表格的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

先簡單說明一下,這個(gè)Demo引入的vue,iview的方式是標(biāo)簽引入的,沒有用到webpack之類的構(gòu)建工具...

畢竟公司還在用angularjs+jq.

這也是我第一次寫文章,大家看看思路就行了,要是有大佬指點(diǎn)指點(diǎn)就更好了

話不多說,先來個(gè)效果圖

我們再看下極為簡單的目錄結(jié)構(gòu)

IViewEditTable    ## vue+iview 實(shí)現(xiàn)的可編輯表格
└── index.html    ## 首頁
└── js
 └── editTable.js   ## 首頁JS
└── ivew      ## iview相關(guān)
└── vue
 ├── axios.min.js   ## axios (ajax)
 ├── util.js    ## 與業(yè)務(wù)無關(guān)的純工具函數(shù)包
 └── vue.min.js   ## vue (2.x)

首頁html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>可編輯表格</title>
 <link href="iview/iview.css" rel="external nofollow" rel="stylesheet" />
</head>
<body style="background-color: #f0f3f4;">
 <div id="editTableCtrl">
 <i-table :loading="loading" border :data="dataList" :columns="columnsList" stripe size="small"></i-table>
 </div>
 <script src="vue/axios.min.js"></script>
 <script src="vue/vue.min.js"></script>
 <script src="iview/iview.min.js"></script>
 <script src="vue/util.js"></script>
 <script src="js/editTable.js"></script>
</body>
</html>

首頁沒什么說的,都是基本的架子. 這是需要渲染的數(shù)據(jù)及其說明:

{
 "Status": 1,
 "Total": 233,
 "Items": [{
 "ID": 1,
 "PID": 3,
 "PRJCODE": "2018-001",           //項(xiàng)目編號 不可編輯
 "PRJNAME": "淡化海水配套泵站",         //項(xiàng)目名稱 文本輸入框
 "PRJTYPE": "基礎(chǔ)設(shè)施",           //項(xiàng)目類型 下拉選項(xiàng)
 "JSUNIT": "投資公司",           //建設(shè)單位 文本輸入框
 "FLOW_TYPE_CODE":"A02",           //流程分類 下拉選項(xiàng),與數(shù)據(jù)庫以code形式交互
 "DATE_START": "2018-12-1",          //開工時(shí)間 日期選擇
 "DATE_END": "2019-12-1",          //竣工時(shí)間 日期選擇
 "CONTENT": "建設(shè)淡化海水配套泵站一座，占地面積約8500平方米", //建設(shè)內(nèi)容 多行輸入框
 "INVEST_ALL": "1000"           //總投資 數(shù)字輸入框
 }]
}

還有editTable.js的基本架子,$http是我為了方便在utils最后一行加入的 (angularjs用多了,習(xí)慣用\$http)

Vue.prototype.utils = utils
window.$http = axios

editTable.js :

var vm = new Vue({
 el: '#editTableCtrl',
 data: function() {
 return {
  loading: true,
  //表格的數(shù)據(jù)源
  dataList: [],
  // 列
  columnsList: [],
  // 增加編輯狀態(tài), 保存狀態(tài), 用于操作數(shù)據(jù) 避免干擾原數(shù)據(jù)渲染
  cloneDataList: []
 }
 },
 methods: {
 getData: function() {
  var self = this;
  self.loading = true;
  $http.get('json/editTable.txt').then(function(res) {
  self.dataList = res.data.Items;
  self.loading = false;
  });
 },
 },
 created: function() {
 this.getData();
 }
});

我們再來按照iview的規(guī)則編寫渲染的列:

//...

   /**
    * @name columnsList (瀏覽器 渲染的列) 
    * @author catkin
    * @see https://www.iviewui.com/components/table
    * @param 
    * { 
    * titleHtml : 渲染帶有html的表頭 列: '資金<em class="blue" style="color:red">來源</em>'
    * editable : true,可編輯的列 必須有字段 
    * option  : 渲染的下拉框列表,如果需要與數(shù)據(jù)庫交互的值與顯示的值不同,須使用[{value:'value',label:'label'}]的形式,下面有例子
    * date   : 渲染成data類型 ,可選參數(shù): 
    *       date | daterange: yyyy-MM-dd (默認(rèn))
    *       datetime | datetimerange: yyyy-MM-dd HH:mm:ss
    *       year: yyyy
    *       month: yyyy-MM
    * input   : 渲染input類型 ,可選參數(shù)為html5所有類型 (額外增加 textarea 屬性), 默認(rèn)text
    * handle  : 數(shù)組類型, 渲染操作方式,目前只支持 'edit', 'delete'
    * }
    * @version 0.0.1
    */

columnsList: [{
  width: 80,
  type: 'index',
  title: '序號',
  align: 'center'
}, {
  align: 'center',
  title: '項(xiàng)目編號',
  key: 'PRJCODE'
}, {
  align: 'center',
  title: '項(xiàng)目名稱',
  titleHtml: '項(xiàng)目名稱 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'PRJNAME',
  editable: true
}, {
  align: 'center',
  title: '項(xiàng)目分類',
  titleHtml: '項(xiàng)目分類 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'PRJTYPE',
  option: ['產(chǎn)業(yè)項(xiàng)目', '基礎(chǔ)設(shè)施', '民生項(xiàng)目', '住宅項(xiàng)目'],
  editable: true
}, {
  align: 'center',
  title: '建設(shè)單位',
  titleHtml: '建設(shè)單位 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'JSUNIT',
  editable: true
}, {
  align: 'center',
  title: '流程分類',
  titleHtml: '流程分類 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'FLOW_TYPE_CODE',
  option: [{
   value: 'A01',
   label: '建筑-出讓'
  }, {
   value: 'A02',
   label: '建筑-劃撥'
  }, {
   value: 'B01',
   label: '市政-綠化'
  }, {
   value: 'B02',
   label: '市政-管線'
  }],
  editable: true
}, {
  align: 'center',
  title: '開工時(shí)間',
  titleHtml: '開工時(shí)間 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'DATE_START',
  //這里在后面處理的時(shí)候會分割成['month','yyyy-MM']的數(shù)組,分別代表iview的DatePicker組件選擇日期的格式與數(shù)據(jù)庫傳過來時(shí)頁面顯示的格式
  date: 'month_yyyy-MM',  
  editable: true
}, {
  align: 'center',
  title: '竣工時(shí)間',
  titleHtml: '竣工時(shí)間 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'DATE_END',
  date: 'month_yyyy-MM',
  editable: true
}, {
  align: 'center',
  title: '建設(shè)內(nèi)容',
  titleHtml: '建設(shè)內(nèi)容 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'CONTENT',
  input: 'textarea',
  editable: true
}, {
  align: 'center',
  title: '總投資(萬元)',
  titleHtml: '總投資<br />(萬元) <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'INVEST_ALL',
  input: 'number',
  editable: true
}, {
  title: '操作',
  align: 'center',
  width: 150,
  key: 'handle',
  handle: ['edit', 'delete']
}]

//...

此時(shí)頁面應(yīng)該已經(jīng)可以渲染出表格了

既然要編輯數(shù)據(jù),并且我的需求是整行整行的編輯,而編輯的同時(shí)就會同步更新數(shù)據(jù),那么問題來了
vue中, 數(shù)據(jù)更新,視圖會隨之更新. 想象一下,我在輸入框中屬于一個(gè)值,觸發(fā)了數(shù)據(jù)更新,接著又觸發(fā)了視圖更新,那么我每次輸入時(shí),這個(gè)input都會失焦,毫無用戶體驗(yàn). 所以我們把可編輯的動(dòng)態(tài)內(nèi)容用cloneDataList渲染,靜態(tài)顯示的用dataList渲染

//...
self.dataList = res.data.Items;
// 簡單的深拷貝,雖然map會返回新數(shù)組,但是數(shù)組元素也是引用類型,不能直接改,所以先深拷貝一份
self.cloneDataList = JSON.parse(JSON.stringify(self.dataList)).map(function(item) {
 // 給每行添加一個(gè)編輯狀態(tài) 與 保存狀態(tài), 默認(rèn)都是false
 item.editting = false;
 item.saving = false;
 return item;
});
//...

接下來,我們要根據(jù)columnsList做一次循環(huán)判斷,根據(jù)相應(yīng)的key寫出不同的render函數(shù)

//全局添加
//根據(jù)value值找出數(shù)組中的對象元素
function findObjectInOption(value) {
 return function(item) {
 return item.value === value;
 }
}
//動(dòng)態(tài)添加編輯按鈕
var editButton = function(vm, h, currentRow, index) {
 return h('Button', {
 props: {
  size: 'small',
  type: currentRow.editting ? 'success' : 'primary',
  loading: currentRow.saving
 },
 style: {
  margin: '0 5px'
 },
 on: {
  click: function() {
  // 點(diǎn)擊按鈕時(shí)改變當(dāng)前行的編輯狀態(tài), 當(dāng)數(shù)據(jù)被更新時(shí),render函數(shù)會再次執(zhí)行,詳情參考https://cn.vuejs.org/v2/api/#render
  // handleBackdata是用來刪除當(dāng)前行的editting屬性與saving屬性
  var tempData = vm.handleBackdata(currentRow)
  if (!currentRow.editting) {
   currentRow.editting = true;
  } else {
   // 這里也是簡單的點(diǎn)擊編輯后的數(shù)據(jù)與原始數(shù)據(jù)做對比,一致則不做操作,其實(shí)更好的應(yīng)該遍歷所有屬性并判斷
   if (JSON.stringify(tempData) == JSON.stringify(vm.dataList[index])) {
   console.log('未更改');
   return currentRow.editting = false;
   }
   vm.saveData(currentRow, index)
   currentRow.saving = true;
  }
  }
 }
 }, currentRow.editting ? '保存' : '編輯');
};
//動(dòng)態(tài)添加 刪除 按鈕
var deleteButton = function(vm, h, currentRow, index) {
 return h('Poptip', {
  props: {
  confirm: true,
  title: currentRow.WRAPDATASTATUS != '刪除' ? '您確定要?jiǎng)h除這條數(shù)據(jù)嗎?' : '您確定要對條數(shù)據(jù)撤銷刪除嗎?',
  transfer: true,
  placement: 'left'
  },
  on: {
  'on-ok': function() {
   vm.deleteData(currentRow, index)
  }
  }
 },
 [
  h('Button', {
  style: {
   color: '#ed3f14',
   fontSize: '18px',
   padding: '2px 7px 0',
   border: 'none',
   outline: 'none',
   focus: {
   '-webkit-box-shadow': 'none',
   'box-shadow': 'none'
   }
  },
  domProps: {
   title: '刪除'
  },
  props: {
   size: 'small',
   type: 'ghost',
   icon: 'android-delete',
   placement: 'left'
  }
  })
 ]);
};


//methods中添加
init: function() {
 console.log('init');
 var self = this;
 self.columnsList.forEach(function(item) {
 // 使用$set 可以觸發(fā)視圖更新
 // 如果含有titleHtml屬性 將其值填入表頭
 if (item.titleHtml) {
  self.$set(item, 'renderHeader', function(h, params) {
  return h('span', {
   domProps: {
   innerHTML: params.column.titleHtml
   }
  });
  });
 }
 // 如果含有操作屬性 添加相應(yīng)按鈕
 if (item.handle) {
  item.render = function(h, param) {
  var currentRow = self.cloneDataList[param.index];
  var children = [];
  item.handle.forEach(function(item) {
   if (item === 'edit') {
   children.push(editButton(self, h, currentRow, param.index));
   } else if (item === 'delete') {
   children.push(deleteButton(self, h, currentRow, param.index));
   }
  });
  return h('div', children);
  };
 }
 //如果含有editable屬性并且為true
 if (item.editable) {
  item.render = function(h, params) {
  var currentRow = self.cloneDataList[params.index];
  // 非編輯狀態(tài)
  if (!currentRow.editting) {
   // 日期類型單獨(dú) 渲染(利用工具暴力的formatDate格式化日期)
   if (item.date) {
   return h('span', self.utils.formatDate(currentRow[item.key], item.date.split('_')[1]))
   }
   // 下拉類型中value與label不一致時(shí)單獨(dú)渲染
   if (item.option && self.utils.isArray(item.option)) {
   // 我這里為了簡單的判斷了第一個(gè)元素為object的情況,其實(shí)最好用every來判斷所有元素
   if (typeof item.option[0] === 'object') {
    return h('span', item.option.find(findObjectInOption(currentRow[item.key])).label);
   }
   }
   return h('span', currentRow[item.key]);
  } else {
  // 編輯狀態(tài)
   //如果含有option屬性
   if (item.option && self.utils.isArray(item.option)) {
   return h('Select', {
    props: {
    // ***重點(diǎn)***: 這里要寫currentRow[params.column.key],綁定的是cloneDataList里的數(shù)據(jù)
    value: currentRow[params.column.key]
    },
    on: {
    'on-change': function(value) {
     self.$set(currentRow, params.column.key, value)
    }
    }
   }, item.option.map(function(item) {
    return h('Option', {
    props: {
     value: item.value || item,
     label: item.label || item
    }
    }, item.label || item);
   }));
   } else if (item.date) {
   //如果含有date屬性
   return h('DatePicker', {
    props: {
    type: item.date.split('_')[0] || 'date',
    clearable: false,
    value: currentRow[params.column.key]
    },
    on: {
    'on-change': function(value) {
     self.$set(currentRow, params.column.key, value)
    }
    }
   });
   } else {
   // 默認(rèn)input
   return h('Input', {
    props: {
    // type類型也是自定的屬性
    type: item.input || 'text',
    // rows只有在input 為textarea時(shí)才會起作用
    rows: 3,
    value: currentRow[params.column.key]
    },
    on: {
    'on-change'(event) {
     self.$set(currentRow, params.column.key, event.target.value)
    }
    }
   });
   }
  }
  };
 }
 });
},
// 還原數(shù)據(jù),用來與原始數(shù)據(jù)作對比的
handleBackdata: function(object) {
 var clonedData = JSON.parse(JSON.stringify(object));
 delete clonedData.editting;
 delete clonedData.saving;
 return clonedData;
}

到這里完成已經(jīng)差不多了,補(bǔ)上保存數(shù)據(jù)與刪除數(shù)據(jù)的函數(shù)

// 保存數(shù)據(jù)
saveData: function(currentRow, index) {
 var self = this;
 // 修改當(dāng)前的原始數(shù)據(jù), 就不需要再從服務(wù)端獲取了
 this.$set(this.dataList, index, this.handleBackdata(currentRow))
 // 需要保存的數(shù)據(jù)
 // 模擬ajax
 setTimeout(function() {
 充值編輯與保存狀態(tài)
 currentRow.saving = false;
 currentRow.editting = false;
 self.$Message.success('保存完成');
 console.log(self.dataList);
 }, 1000)
},
// 刪除數(shù)據(jù)
deleteData: function(currentRow, index) {
 var self = this;
 console.log(currentRow.ID);
 setTimeout(function() {
 self.$delete(self.dataList, index)
 self.$delete(self.cloneDataList, index)
 vm.$Message.success('刪除成功');
 }, 1000)
},

完整的editTable.js代碼

// 根據(jù)數(shù)據(jù)中下拉的值找到對應(yīng)的對象
function findObjectInOption(name) {
 return function(item) {
 return item.value === name;
 }
}
var editButton = function(vm, h, currentRow, index) {
 return h('Button', {
 props: {
  size: 'small',
  type: currentRow.editting ? 'success' : 'primary',
  loading: currentRow.saving
 },
 style: {
  margin: '0 5px'
 },
 on: {
  click: function() {
   // 點(diǎn)擊按鈕時(shí)改變當(dāng)前行的編輯狀態(tài),當(dāng)數(shù)據(jù)被更新時(shí),render函數(shù)會再次執(zhí)行,詳情參考https://cn.vuejs.org/v2/api/#render
   // handleBackdata是用來刪除當(dāng)前行的editting屬性與saving屬性
   var tempData = vm.handleBackdata(currentRow)
   if (!currentRow.editting) {
   currentRow.editting = true;
   } else {
   // 這里也是簡單的點(diǎn)擊編輯后的數(shù)據(jù)與原始數(shù)據(jù)做對比,一致則不做操作,其實(shí)更好的應(yīng)該遍歷所有屬性并判斷
   if (JSON.stringify(tempData) == JSON.stringify(vm.dataList[index])) {
    console.log('未更改');
    return currentRow.editting = false;
   }
   vm.saveData(currentRow, index)
   currentRow.saving = true;
   }
  }
 }
 }, currentRow.editting ? '保存' : '編輯');
};
//動(dòng)態(tài)添加 刪除 按鈕
var deleteButton = function(vm, h, currentRow, index) {
 return h('Poptip', {
  props: {
  confirm: true,
  title: currentRow.WRAPDATASTATUS != '刪除' ? '您確定要?jiǎng)h除這條數(shù)據(jù)嗎?' : '您確定要對條數(shù)據(jù)撤銷刪除嗎?',
  transfer: true,
  placement: 'left'
  },
  on: {
  'on-ok': function() {
   vm.deleteData(currentRow, index)
  }
  }
 },
 [
  h('Button', {
  style: {
   color: '#ed3f14',
   fontSize: '18px',
   padding: '2px 7px 0',
   border: 'none',
   outline: 'none',
   focus: {
   '-webkit-box-shadow': 'none',
   'box-shadow': 'none'
   }
  },
  domProps: {
   title: '刪除'
  },
  props: {
   size: 'small',
   type: 'ghost',
   icon: 'android-delete',
   placement: 'left'
  }
  })
 ]);
};
var vm = new Vue({
 el: '#editTableCtrl',
 data: function() {
 return {
  loading: true,
  //表格的數(shù)據(jù)源
  dataList: [],
  /**
  * @name columnsList (瀏覽器 渲染的列) 
  * @author ch
  * @see https://www.iviewui.com/components/table
  * @param 
  * { 
  * titleHtml : 渲染帶有html的表頭 列: '資金<em class="blue" style="color:red">來源</em>'
  * editable : true,可編輯的列 必須有字段 
  * option : 渲染的下拉框列表
  * date  : 渲染成data類型 ,可選參數(shù): 
  *    date | daterange: yyyy-MM-dd (默認(rèn))
  *    datetime | datetimerange: yyyy-MM-dd HH:mm:ss
  *    year: yyyy
  *    month: yyyy-MM
  * input  : 渲染input類型 ,可選參數(shù)為html5所有類型 (額外增加 textarea 屬性), 默認(rèn)text
  * handle : 數(shù)組類型, 渲染操作方式,目前只支持 'edit', 'delete'
  * }
  * @version 0.0.1
  */
  columnsList: [{
  width: 80,
  type: 'index',
  title: '序號',
  align: 'center'
  }, {
  align: 'center',
  title: '項(xiàng)目編號',
  key: 'PRJCODE'
  }, {
  align: 'center',
  title: '項(xiàng)目名稱',
  titleHtml: '項(xiàng)目名稱 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'PRJNAME',
  editable: true
  }, {
  align: 'center',
  title: '項(xiàng)目分類',
  titleHtml: '項(xiàng)目分類 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'PRJTYPE',
  option: ['產(chǎn)業(yè)項(xiàng)目', '基礎(chǔ)設(shè)施', '民生項(xiàng)目', '住宅項(xiàng)目'],
  editable: true
  }, {
  align: 'center',
  title: '建設(shè)單位',
  titleHtml: '建設(shè)單位 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'JSUNIT',
  editable: true
  }, {
  align: 'center',
  title: '流程分類',
  titleHtml: '流程分類 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'FLOW_TYPE_CODE',
  option: [{
   value: 'A01',
   label: '建筑-出讓'
  }, {
   value: 'A02',
   label: '建筑-劃撥'
  }, {
   value: 'B01',
   label: '市政-綠化'
  }, {
   value: 'B02',
   label: '市政-管線'
  }],
  editable: true
  }, {
  align: 'center',
  title: '開工時(shí)間',
  titleHtml: '開工時(shí)間 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'DATE_START',
  //這里在后面處理的時(shí)候會分割成['month','yyyy-MM']的數(shù)組,分別代表iview的DatePicker組件選擇日期的格式與數(shù)據(jù)庫傳過來時(shí)頁面顯示的格式
  date: 'month_yyyy-MM',
  editable: true
  }, {
  align: 'center',
  title: '竣工時(shí)間',
  titleHtml: '竣工時(shí)間 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'DATE_END',
  date: 'month_yyyy-MM',
  editable: true
  }, {
  align: 'center',
  title: '建設(shè)內(nèi)容',
  titleHtml: '建設(shè)內(nèi)容 <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'CONTENT',
  input: 'textarea',
  editable: true
  }, {
  align: 'center',
  title: '總投資(萬元)',
  titleHtml: '總投資<br />(萬元) <i class="ivu-icon ivu-icon-edit"></i>',
  key: 'INVEST_ALL',
  input: 'number',
  editable: true
  }, {
  title: '操作',
  align: 'center',
  width: 150,
  key: 'handle',
  handle: ['edit', 'delete']
  }],
  // 增加編輯狀態(tài), 保存狀態(tài), 用于操作數(shù)據(jù) 避免干擾原數(shù)據(jù)渲染
  cloneDataList: []
 }
 },
 methods: {
 getData: function() {
  var self = this;
  self.loading = true;
  $http.get('json/editTable.txt').then(function(res) {
  // 給每行添加一個(gè)編輯狀態(tài) 與 保存狀態(tài)
  self.dataList = res.data.Items;
  self.cloneDataList = JSON.parse(JSON.stringify(self.dataList)).map(function(item) {
   item.editting = false;
   item.saving = false;
   return item;
  });
  self.loading = false;
  });
 },
 //初始化數(shù)據(jù)
 //methods中添加
 init: function() {
  console.log('init');
  var self = this;
  self.columnsList.forEach(function(item) {
  // 使用$set 可以觸發(fā)視圖更新
  // 如果含有titleHtml屬性 將其值填入表頭
  if (item.titleHtml) {
   self.$set(item, 'renderHeader', function(h, params) {
   return h('span', {
    domProps: {
    innerHTML: params.column.titleHtml
    }
   });
   });
  }
  // 如果含有操作屬性 添加相應(yīng)按鈕
  if (item.handle) {
   item.render = function(h, param) {
   var currentRow = self.cloneDataList[param.index];
   var children = [];
   item.handle.forEach(function(item) {
    if (item === 'edit') {
    children.push(editButton(self, h, currentRow, param.index));
    } else if (item === 'delete') {
    children.push(deleteButton(self, h, currentRow, param.index));
    }
   });
   return h('div', children);
   };
  }
  //如果含有editable屬性并且為true
  if (item.editable) {
   item.render = function(h, params) {
   var currentRow = self.cloneDataList[params.index];
   // 非編輯狀態(tài)
   if (!currentRow.editting) {
    // 日期類型單獨(dú) 渲染(利用工具暴力的formatDate格式化日期)
    if (item.date) {
    return h('span', self.utils.formatDate(currentRow[item.key], item.date.split('_')[1]))
    }
    // 下拉類型中value與label不一致時(shí)單獨(dú)渲染
    if (item.option && self.utils.isArray(item.option)) {
    // 我這里為了簡單的判斷了第一個(gè)元素為object的情況,其實(shí)最好用every來判斷所有元素
    if (typeof item.option[0] === 'object') {
     return h('span', item.option.find(findObjectInOption(currentRow[item.key])).label);
    }
    }
    return h('span', currentRow[item.key]);
   } else {
    // 編輯狀態(tài)
    //如果含有option屬性
    if (item.option && self.utils.isArray(item.option)) {
    return h('Select', {
     props: {
     // ***重點(diǎn)***: 這里要寫currentRow[params.column.key],綁定的是cloneDataList里的數(shù)據(jù)
     value: currentRow[params.column.key]
     },
     on: {
     'on-change': function(value) {
      self.$set(currentRow, params.column.key, value)
     }
     }
    }, item.option.map(function(item) {
     return h('Option', {
     props: {
      value: item.value || item,
      label: item.label || item
     }
     }, item.label || item);
    }));
    } else if (item.date) {
    //如果含有date屬性
    return h('DatePicker', {
     props: {
     type: item.date.split('_')[0] || 'date',
     clearable: false,
     value: currentRow[params.column.key]
     },
     on: {
     'on-change': function(value) {
      self.$set(currentRow, params.column.key, value)
     }
     }
    });
    } else {
    // 默認(rèn)input
    return h('Input', {
     props: {
     // type類型也是自定的屬性
     type: item.input || 'text',
     // rows只有在input 為textarea時(shí)才會起作用
     rows: 3,
     value: currentRow[params.column.key]
     },
     on: {
     'on-change'(event) {
      self.$set(currentRow, params.column.key, event.target.value)
     }
     }
    });
    }
   }
   };
  }
  });
 },
 saveData: function(currentRow, index) {
  var self = this;
  // 修改當(dāng)前的原始數(shù)據(jù), 就不需要再從服務(wù)端獲取了
  this.$set(this.dataList, index, this.handleBackdata(currentRow))
  // 需要保存的數(shù)據(jù)
  // 模擬ajax
  setTimeout(function() {
  // 重置編輯與保存狀態(tài)
  currentRow.saving = false;
  currentRow.editting = false;
  self.$Message.success('保存完成');
  console.log(self.dataList);
  }, 1000)
 },
 // 刪除數(shù)據(jù)
 deleteData: function(currentRow, index) {
  var self = this;
  console.log(currentRow.ID);
  setTimeout(function() {
  self.$delete(self.dataList, index)
  self.$delete(self.cloneDataList, index)
  vm.$Message.success('刪除成功');
  }, 1000)
 },
 // 還原數(shù)據(jù),用來與原始數(shù)據(jù)作對比的
 handleBackdata: function(object) {
  var clonedData = JSON.parse(JSON.stringify(object));
  delete clonedData.editting;
  delete clonedData.saving;
  return clonedData;
 }
 },
 created: function() {
 this.getData();
 this.init();
 }
});

總結(jié)

兩三天的時(shí)間搞的這些,剛開始也是各種懵逼.期間也試過用插槽來實(shí)現(xiàn),但還是沒有這個(gè)方法來的清晰(隊(duì)友都能看懂), 總的來說就是在columnsList自定義一些屬性,后面根據(jù)這些屬性,在render函數(shù)里return不同的值,思路還是很簡單的.

第一次寫文章,并且我也是vue初學(xué)者,寫的湊合看吧 ^_^ ,歡迎留言指正

本demo 連同之前學(xué)習(xí)vue時(shí)寫的demo一起放在的我的github上,歡迎star...

github: https://github.com/catkinmu/vue.js-practice/tree/master/IViewEditTable

參考

vue: render文檔
 iview
iview admin1.x 版本

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: