本篇文章給大家分享的是有關(guān)React Ant Design實(shí)現(xiàn)樹形表格的復(fù)雜增刪改，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括柯橋網(wǎng)站建設(shè)、柯橋網(wǎng)站制作、柯橋網(wǎng)頁制作以及柯橋網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，柯橋網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到柯橋省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

樹形表格的顯示

在antd中對于表格的key值有著嚴(yán)格的控制，每一個(gè)row都必須有一個(gè)獨(dú)一無二的key值，可以是數(shù)字也可以是字符串。這一點(diǎn)和我曾經(jīng)使用過得iview有著很大的區(qū)別。react使用key來代表每一行是為了避免重新渲染的問題，這個(gè)優(yōu)化也在實(shí)際的開發(fā)中帶來了不少的問題。比如新建行時(shí)需要自定義新key。

下面直接上一下代碼及代碼效果，這是一個(gè)三級的樹形表格，且其中包含二級標(biāo)題。

最終效果 ​

colums標(biāo)題: 簡易版標(biāo)題，隨著功能的增加，我們將增加colums的復(fù)雜度。

let columns = [
 {
  title: '題目',
  dataIndex: 'text'
 },
 {
  title: '類型',
  children: [
   {
    title: '一級',
    dataIndex: 'text1'
   },
   {
    title: '二級',
    dataIndex: 'text2',
   }]
 },
 {
  title: '內(nèi)容',
  dataIndex: 'content'
 },
 {
  title: '答案',
  dataIndex: 'answer',
 },
 {
  title: '類型',
  dataIndex: 'mark_type',
  className: 'line'
 },
 {
  title: '版本',
  dataIndex: 'version',
  className: 'line'
 },
 {
  title: '一級內(nèi)容點(diǎn)',
  dataIndex: 'value1',
  className: 'line'
 },
 {
  title: '二級內(nèi)容點(diǎn)',
  dataIndex: 'value2',
  className: 'line'
 },
 {
  title: '操作',
  key: 'action',
  width: 205
 }
];

當(dāng)前題目：ReactAntDesign實(shí)現(xiàn)樹形表格的復(fù)雜增刪改-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://weahome.cn/article/dceggi.html