欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ant design vue嵌套表格及表格內(nèi)部編輯的用法說明

 更新時(shí)間:2020年10月28日 10:03:24   作者:溫九月  
這篇文章主要介紹了ant design vue嵌套表格及表格內(nèi)部編輯的用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

實(shí)現(xiàn)效果:

因?yàn)閜ro手腳架中封裝的s-table不支持expand和expandedRowsChange事件,無法實(shí)現(xiàn)根據(jù)展開節(jié)點(diǎn)獲取其內(nèi)部數(shù)據(jù)的需求,因此直接使用a-table組件

表格外層可以翻頁,查詢攜帶頁碼參數(shù)

<a-table
size="default"
rowKey="dict_id" //根據(jù)自己數(shù)據(jù)內(nèi)部關(guān)鍵針設(shè)定
ref="table"
@expandedRowsChange="expandedRowsChange"
@expand="expand" // 展開表格節(jié)點(diǎn)操作
@change="change" // 外層表格中排序,翻頁,修改頁面數(shù)量等操作
:expandedRowKeys="expandedRowKeys" // 操作展開的節(jié)點(diǎn)
:pagination="pagination" // 頁碼參數(shù)
:columns="columns" // 表頭
:dataSource="loadData" // 數(shù)據(jù)
>
<a-table
size="default"
style="margin-bottom:0;"
rowKey="key"
slot="expandedRowRender" // 以內(nèi)層方式展現(xiàn)
:columns="innerColumns"
:dataSource="data"
:pagination="false"
:loading="innerloading"
@change="innerhandleChange"
>
<template v-for="(col, i) in ['item_text', 'item_value', 'item_checked', 'item_remark', 'item_sort', 'item_status']" :slot="col" slot-scope="text, record">
<a-input
:key="col"
v-if="record.editable"
style="margin: -5px 0"
:value="text"
:placeholder="innerColumns[i].title"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>{{ text }}</template>
</template> // 內(nèi)部表格可編輯模板
<template slot="operation" slot-scope="text, record">
<template v-if="record.editable">
<span v-if="record.isNew">
<a @click="saveRow(record)">添加</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要?jiǎng)h除此行?" @confirm="remove(record.key)">
<a>刪除</a>
</a-popconfirm>
</span>
<span v-else>
<a @click="saveRow(record)">保存</a>
<!-- <a-divider type="vertical" />
<a @click="cancel(record.key)">取消</a> -->
</span>
</template> // 內(nèi)部表格新增模板
<span v-else>
<a @click="toggle(record)">編輯</a>
</span>
</template>
</a-table>
<div
slot="expandedRowRender"
style="margin: 0">
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增屬性</a-button>
</div>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">編輯</a>
</span>
</a-table>

主要數(shù)據(jù):

  expandedRowKeys: [],
  // 表頭
  columns: [
  {
   title: '字典編碼',
   dataIndex: 'dict_code'
  },
  {
   title: '字典名稱',
   dataIndex: 'dict_name'
  },
  {
   title: '狀態(tài)',
   dataIndex: 'dict_status'
  },
  {
   title: '字典描述',
   dataIndex: 'dict_remark'
  }, {
   title: '操作',
   width: '150px',
   dataIndex: 'action',
   scopedSlots: { customRender: 'action' }
  }
  ],
  loadData: [],
  innerColumns: [
  {
   title: '字段名',
   dataIndex: 'item_text',
   key: 'item_text',
   width: '15%',
   scopedSlots: { customRender: 'item_text' }
  },
  {
   title: '字段值',
   dataIndex: 'item_value',
   key: 'item_value',
   width: '15%',
   scopedSlots: { customRender: 'item_value' }
  },
  {
   title: '默認(rèn)選中(0:否,1:是)',
   dataIndex: 'item_checked',
   key: 'item_checked',
   width: '10%',
   scopedSlots: { customRender: 'item_checked' }
  },
  {
   title: '備注',
   dataIndex: 'item_remark',
   key: 'item_remark',
   width: '20%',
   scopedSlots: { customRender: 'item_remark' }
  },
  {
   title: '排序號(hào)',
   dataIndex: 'item_sort',
   key: 'item_sort',
   width: '10%',
   sorter: true,
   scopedSlots: { customRender: 'item_sort' }
  },
  {
   title: '狀態(tài)(1:正常,2:異常)',
   dataIndex: 'item_status',
   key: 'item_status',
   width: '10%',
   scopedSlots: { customRender: 'item_status' }
  },
  {
   title: '操作',
   key: 'action',
   scopedSlots: { customRender: 'operation' }
  }
  ],
  data: [],
  innerloading: false,
  parameter: {
  pageNo: 1,
  pageSize: 10
  },
  // 排序參數(shù)
  sortedInfo: null,
  pagination: {
  total: 1,
  current: 1,
  showTotal: total => `共 ${total} 條記錄 第 ${this.pagination.current} / ${Math.ceil(total / this.pagination.pageSize)} 頁`,
  showQuickJumper: true,
  showSizeChanger: true,
  pageSize: 10
  }

初始進(jìn)入頁面時(shí),需要獲取外層表格

使用初始參數(shù)parameter請(qǐng)求第一頁數(shù)據(jù),從返回?cái)?shù)據(jù)中對(duì)pagination重置翻頁組件內(nèi)部參數(shù),主要有當(dāng)前頁,頁碼總量,頁碼大小

getDictList(this.parameter)
  .then(res => {
   if (res.code === '200') {
   console.log(res)
   this.loadData = res.data
   this.pagination.total = res.totalCount
   this.pagination.current = res.pageNo
   this.pagination.pageSize = res.pageSize
   } else {
   this.$message.error(res.message)
   }
  })

展開外層數(shù)據(jù)節(jié)點(diǎn)獲取內(nèi)部數(shù)據(jù):

expand (expanded, record) {
  this.expandedRowKeys = [] // 重置展開節(jié)點(diǎn),只展開當(dāng)前點(diǎn)擊的節(jié)點(diǎn)(內(nèi)部數(shù)據(jù)調(diào)用模板,無法做到同時(shí)幾個(gè)內(nèi)層表格數(shù)據(jù)直接緩存在頁面)
  if (expanded) {
  this.expandedRowKeys = [record.dict_id]
  this.getDictItem() // 獲取表格內(nèi)部數(shù)據(jù)
  }
  console.log(expanded, record)
 },
// 展開節(jié)點(diǎn)后獲取內(nèi)部表格數(shù)據(jù)
getDictItem (obj) {
  let searchparam = { dict_id: this.expandedRowKeys[0] }
  if (obj) { // 內(nèi)部表格除了根據(jù)其父節(jié)點(diǎn)id查找的條件外,還支持排序,因此需要整合排序參數(shù)
  searchparam = Object.assign(searchparam, obj)
  }
  this.innerloading = true
  getDictItemList(searchparam).then(res => {
  if (res.code === '200') {
   this.data = res.data
   this.innerloading = false
  } else {
   this.$message.error(res.message)
  }
  })
 },
// 外層表格操作
 change (pagination, filters, sorter) { // 對(duì)頁面大小,篩選,排序等條件修改后重新查詢數(shù)據(jù)
  this.pagination = pagination
  this.parameter.pageNo = pagination.current
  this.parameter.pageSize = pagination.pageSize
  this.getDict()
  console.log('pagination', pagination)
  console.log('filters', filters)
  console.log('sorter', sorter)
 },
 /* 內(nèi)層表格操作 */
 innerhandleChange (pagination, filters, sorter) {
  console.log('Various parameters', pagination, filters, sorter)
  this.sortedInfo = {
  sortField: sorter.field,
  sortOrder: sorter.order
  }
  this.getDictItem(this.sortedInfo)
 },

至此,展示功能已經(jīng)幾乎做完啦,現(xiàn)在是內(nèi)部表格的編輯與新增功能

handleChange (value, key, column) { // 實(shí)時(shí)更新表格中各個(gè)輸入框的狀態(tài)
  const newData = [...this.data]
  const target = newData.filter(item => key === item.key)[0]
  if (target) {
  target[column] = value
  this.data = newData
  }
 },
 toggle (data) { // 切換輸入框與文本狀態(tài),實(shí)現(xiàn)展示與編輯功能
  const target = this.data.filter(item => item.key === data.key)[0]
  target.editable = !target.editable
  console.log(this.data)
 },
 newMember () { // 新增內(nèi)容后的數(shù)據(jù)字段
  this.data.push({
  'item_text': '',
  'item_value': '',
  'item_checked': '',
  'item_remark': '',
  'item_sort': '',
  'item_status': '',
  key: this.data.length,
  editable: true,
  isNew: true
  })
 },
 saveRow (record) {
  this.innerloading = true
  if (!record.item_text || !record.item_value) { // 對(duì)必填項(xiàng)進(jìn)行管控
  this.innerloading = false
  this.$message.error('請(qǐng)至少填寫填寫字段名和字段值。')
  return
  }
  record.item_checked = record.item_checked || 0 // 設(shè)置默認(rèn)值
  record.item_sort = record.item_sort || 1
  record.item_status = record.item_status || 1
  record.dict_id = this.expandedRowKeys[0]
  if (record.item_id) { // 修改
  updateItem(record).then(res => {
   if (res.code === '200') {
   this.$message.success(res.message)
   this.getDictItem() // 修改成功后重新獲取當(dāng)前內(nèi)部表格數(shù)據(jù)
   } else {
   this.$message.error(res.message)
   }
  })
  } else {
  addItem(record).then(res => {
   if (res.code === '200') {
   this.$message.success(res.message)
   this.getDictItem()
   } else {
   this.$message.error(res.message)
   }
  })
  }
 },
 cancel (key) {
  const target = this.data.filter(item => item.key === key)[0]
  target.editable = false
 },
 remove (key) {
  const newData = this.data.filter(item => item.key !== key)
  this.data = newData
 },
 /* 內(nèi)層表格操作結(jié)束 */

外層表格與內(nèi)存表格數(shù)據(jù)示例:

{
 "success": true,
 "code": "200",
 "message": "分頁查詢成功",
 "data": [{
 "dict_id": 1,
 "dict_code": "common_org_type",
 "dict_name": "機(jī)構(gòu)類別",
 "dict_pid": null,
 "dict_status": 1,
 "dict_remark": "機(jī)構(gòu)類別"
 }, {
 "dict_id": 2,
 "dict_code": "common_user_type",
 "dict_name": "人員類別",
 "dict_pid": null,
 "dict_status": 1,
 "dict_remark": "人員類別"
 }, {
 "dict_id": 48,
 "dict_code": "cdsfcsdcf",
 "dict_name": "修改屬性1",
 "dict_pid": null,
 "dict_status": 1,
 "dict_remark": ""
 }, {
 "dict_id": 49,
 "dict_code": "bugbugbug",
 "dict_name": "有字典id",
 "dict_pid": null,
 "dict_status": 1,
 "dict_remark": ""
 }, {
 "dict_id": 50,
 "dict_code": "1",
 "dict_name": "名稱",
 "dict_pid": null,
 "dict_status": 1,
 "dict_remark": "1"
 }, {
 "dict_id": 51,
 "dict_code": "1",
 "dict_name": "1",
 "dict_pid": null,
 "dict_status": 1,
 "dict_remark": null
 }, {
 "dict_id": 52,
 "dict_code": "1",
 "dict_name": "1",
 "dict_pid": null,
 "dict_status": 1,
 "dict_remark": null
 }, {
 "dict_id": 53,
 "dict_code": "1",
 "dict_name": "1",
 "dict_pid": null,
 "dict_status": 1,
 "dict_remark": null
 }, {
 "dict_id": 54,
 "dict_code": "1",
 "dict_name": "1",
 "dict_pid": null,
 "dict_status": 1,
 "dict_remark": ""
 }, {
 "dict_id": 55,
 "dict_code": "dbhasuiuh",
 "dict_name": "測試字典1",
 "dict_pid": null,
 "dict_status": 1,
 "dict_remark": "備注"
 }],
 "totalCount": 11,
 "pageNo": 1,
 "pageSize": 10,
 "totalTag": 1
}
{
 "success": true,
 "code": "200",
 "message": "查詢成功",
 "data": [{
 "item_id": 2,
 "dict_id": 1,
 "item_text": "外部",
 "item_value": "2",
 "item_status": 1,
 "item_sort": 2,
 "item_remark": null,
 "item_checked": 1,
 "editable": 0 // 寫死就行了 一定要有 用于內(nèi)部表格編輯功能
 }, {
 "item_id": 1,
 "dict_id": 1,
 "item_text": "內(nèi)部",
 "item_value": "1",
 "item_status": 1,
 "item_sort": 1,
 "item_remark": "1",
 "item_checked": 1,
 "editable": 0
 }]
}

補(bǔ)充知識(shí):ant design Table可編輯的單元格改進(jìn)版

antd官方也有給文檔,但是超級(jí)麻煩,代碼量還超級(jí)多,改編了一下

如圖:

這里table的columns的寫法,如下:

const columns2 = [
{
title: '尺寸名稱',
dataIndex: 'name',
filterDropdown: true,
filterIcon: <Icon type="edit"/>,
render: () => <Input />,
},
{
title: '標(biāo)準(zhǔn)尺寸',
dataIndex: 'standard',
filterDropdown: true,
filterIcon: <Icon type="edit"/>,
render:() => <Input />,
},
{
title: '上偏差',
dataIndex: 'upper_deviation',
filterDropdown: true,
filterIcon: <Icon type="edit"/>,
render:() => <Input />,
},
{
title: '下偏差',
dataIndex: 'lower_deviation',
filterDropdown: true,
filterIcon: <Icon type="edit"/>,
render: () => <Input />,
},
{
title: '工序',
dataIndex: 'procedure',
filterDropdown: true,
filterIcon: <Icon type="edit"/>,
render: () => 
<Select>
  <Option value='1'>1</Option>  
  <Option value='2'>2</Option> 
</Select>
},
{
title: '操作',
dataIndex: 'operation',
render: (text, record) => (
this.state.size.length >= 1
? (
<Popconfirm title="確定刪除該信息?" onConfirm={() => this.handleDelete(record.key)}>
<a href="javascript:;">刪除</a>
</Popconfirm>
) : null
),
}
];

其中

filterDropdown: true,

filterIcon: <Icon type="edit"/>,

這兩個(gè)是用于給表頭添加圖標(biāo),不需要可以不寫

實(shí)現(xiàn)可編輯表格最重要的是吧這個(gè)表格所有字段都變成可控字段,這樣就可以實(shí)現(xiàn)對(duì)表格數(shù)據(jù)的提交的基本操作

就拿我這里面的尺寸名稱來說,這個(gè)字段叫name ,這里的render就要修改成render: (text, record) => <Input value={text} onChange={(e) => this.handleChange({name: e.target.value}, record)}/>,

這里參數(shù)text可以理解為 input的初始值,onChange事件是吧這個(gè)input變成可控的組件,handleChange這里有兩個(gè)參數(shù),這里“”name: e.target.value“”必須要這么傳,目的是把改組件的值跟name進(jìn)行綁定。

handleChange 方法

handleChange = (value, record) => {
for (var i in value) {
record[i] = value[i];//這一句是必須的,不然狀態(tài)無法更改
this.setState({
size: this.state.size.map((item, key) => item.key == record.key ? {...item, [i]: value[i]} : item)
})
}
}

這里我把這個(gè)可編輯表格的值存在state中的size中,通過key進(jìn)行匹配(這里key代表我這個(gè)表格的rowkey,也就是用來區(qū)分行數(shù)據(jù)的一個(gè)標(biāo)識(shí)),然后修改指定行的指定數(shù)據(jù),通過改變state中的size更新視圖,同時(shí)吧更改的數(shù)據(jù)替換掉原來的 這就實(shí)現(xiàn)了對(duì)表格數(shù)據(jù)的實(shí)時(shí)監(jiān)聽,同時(shí)表格的所有數(shù)據(jù)存在了state中的size中,想要獲取表格數(shù)據(jù)直接用this.state.size即可。

(這里需要注意的時(shí),如果把表格中的某個(gè)字段,比如說name設(shè)置成表格的rowkey,就會(huì)發(fā)生name字段只能輸入單個(gè)字符就會(huì)失去焦點(diǎn)的情況)

以上這篇ant design vue嵌套表格及表格內(nèi)部編輯的用法說明就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 一文詳解Vue中過濾器filters的使用

    一文詳解Vue中過濾器filters的使用

    Vue.js允許自定義過濾器,過濾器的作用可被用于一些常見的文本格式化(也就是修飾文本,但是文本內(nèi)容不會(huì)改變),本文主要來和大家講講過濾器filters的使用,感興趣的可以了解一下
    2023-04-04
  • Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題(推薦)

    Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題(推薦)

    這篇文章主要介紹了Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-12-12
  • Vue?quill-editor?編輯器使用及自定義toobar示例詳解

    Vue?quill-editor?編輯器使用及自定義toobar示例詳解

    這篇文章主要介紹了Vue quill-editor編輯器使用及自定義toobar示例詳解,這里講解編輯器quil-editor的知識(shí)結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • 多個(gè)Vue項(xiàng)目部署到服務(wù)器的步驟記錄

    多個(gè)Vue項(xiàng)目部署到服務(wù)器的步驟記錄

    這篇文章主要給大家介紹了關(guān)于多個(gè)Vue項(xiàng)目部署到服務(wù)器的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • Vue+axios+WebApi+NPOI導(dǎo)出Excel文件實(shí)例方法

    Vue+axios+WebApi+NPOI導(dǎo)出Excel文件實(shí)例方法

    在本篇文章里小編給大家整理關(guān)于Vue+axios+WebApi+NPOI導(dǎo)出Excel文件的知識(shí)點(diǎn)以及實(shí)例代碼,需要的朋友們參考下。
    2019-06-06
  • vue引入iconfont圖標(biāo)庫的優(yōu)雅實(shí)戰(zhàn)記錄

    vue引入iconfont圖標(biāo)庫的優(yōu)雅實(shí)戰(zhàn)記錄

    使用組件庫時(shí),圖標(biāo)往往不能滿足需求,所以我們常常需要用到第三方圖標(biāo)庫,這篇文章主要給大家介紹了關(guān)于vue引入iconfont的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • 基于vue-resource jsonp跨域問題的解決方法

    基于vue-resource jsonp跨域問題的解決方法

    下面小編就為大家分享一篇基于vue-resource jsonp跨域問題的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • 如何巧用Vue緩存函數(shù)淺析

    如何巧用Vue緩存函數(shù)淺析

    有時(shí)候不希望已經(jīng)請(qǐng)求過的數(shù)據(jù),再次請(qǐng)求重復(fù)執(zhí)行刷新操作,我們就需要使用數(shù)據(jù)緩存,這篇文章主要給大家介紹了關(guān)于如何巧用Vue緩存函數(shù)的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • vue仿淘寶訂單狀態(tài)的tab切換效果

    vue仿淘寶訂單狀態(tài)的tab切換效果

    這篇文章主要為大家詳細(xì)介紹了vue仿淘寶訂單狀態(tài)tab切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例

    vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例

    這篇文章主要介紹了vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-03-03

最新評(píng)論