vue+elementui表格可以編輯,單元格級聯(lián)

html代碼如下:

<el-table

??????:data="tableBody"

??????border

??????class="tb-edit"

??????style="width:?100%"

??????ref="multipleTable"

??????@cell-dblclick="celldbClick"

??????@selection-change="rowStyleChange"

??????:row-class-name="rowClass"

??????@header-click="hendClick"

????>

??????<el-table-column?type="selection"?width="50"?fixed></el-table-column>

??????<el-table-column

????????v-for="(item,?index)?in?tableHeader"

????????:key="index"

????????header-align="center"

????????:label="item.headKey"

????????width="250"

????????:class-name="item.headKey+'?'+item.fieIdType"

??????>

????????<template?slot-scope="scope">

??????????<span

????????????v-if="!showEdit[scope.$index][item.headKey]&&item.fieIdType!='ElSelect'"

??????????>{{scope.row.fieldVal[item.headKey]}}</span>

??????????<el-input

????????????v-if="showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElInput'"

????????????@blur="inputBlur"

????????????:name="item.headKey"

????????????clearable

????????????v-model="scope.row.fieldVal[item.headKey]"

??????????></el-input>

??????????<span

????????????v-if="!showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElSelect'"

??????????>{{scope.row.fieldVal[item.headKey+'_NAME']}}</span>

??????????<el-select

????????????v-if="showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElSelect'"

????????????v-model="scope.row.fieldVal[item.headKey]"

????????????:name="item.headKey"

????????????collapse-tags

????????????style="margin-left:?20px;"

????????????placeholder="請選擇"

????????????@change="selchange(scope.row.fieldVal[item.headKey],item.headKey,scope.$index)"

??????????>

????????????<el-option

??????????????v-for="option?in?selList[item.headKey]"

??????????????:key="option.value"

??????????????:label="option.label"

??????????????:value="option.value"

????????????></el-option>

??????????</el-select>

??????????<el-input-number

????????????v-if="showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElInputNumber'"

????????????v-model="scope.row.fieldVal[item.headKey]"

????????????:min="0"

????????????label="描述文字"

????????????@change="numSum(scope.row.fieldVal,item.headKey)"

??????????></el-input-number>

????????</template>

??????</el-table-column>

????</el-table>

單元格中下拉框數據格式:

? ??//模擬數據

????????{

??????????value:?"10001",

??????????label:?"正常裝",

??????????subList:?[

????????????{?value:?"10001.001",?label:?"純新品",?subList:?[]?},

????????????{?value:?"10001.002",?label:?"新產品",?subList:?[]?},

????????????{

??????????????value:?"10001.003",

??????????????label:?"產品硬轉換",

??????????????subList:?[

????????????????{

??????????????????value:?"10001.003.001",

??????????????????label:?"有條形碼變化的硬轉換",

??????????????????subList:?[]

????????????????},

????????????????{

??????????????????value:?"10001.003.002",

??????????????????label:?"無條形碼變化的硬轉換",

??????????????????subList:?[]

????????????????}

??????????????]

????????????},

????????????{

??????????????value:?"10001.004",

??????????????label:?"產品軟轉換",

??????????????subList:?[

????????????????{

??????????????????value:?"10001.004.001",

??????????????????label:?"有首單日的軟轉換",

??????????????????subList:?[]

????????????????},

????????????????{

??????????????????value:?"10001.002",

??????????????????label:?"無首單日的軟轉換",

??????????????????subList:?[]

????????????????}

??????????????]

????????????},

????????????{

??????????????value:?"10001.005",

??????????????label:?"現(xiàn)有的產品改變上市范圍",

??????????????subList:?[]

????????????},

????????????{

??????????????value:?"10001.006",

??????????????label:?"停產并無新品代替",

??????????????subList:?[]

????????????}

??????????]

????????},

????????{

??????????value:?"10002",

??????????label:?"促銷裝",

??????????subList:?[

????????????{?value:?"10002.001",?label:?"純新品",?subList:?[]?},

????????????{?value:?"10002.002",?label:?"新產品",?subList:?[]?},

????????????{?value:?"10002.003",?label:?"產品軟轉換",?subList:?[]?},

????????????{

??????????????value:?"10002.004",

??????????????label:?"現(xiàn)有的產品改變上市范圍",

??????????????subList:?[]

????????????},

????????????{

??????????????value:?"10002.005",

??????????????label:?"現(xiàn)有產品重新上市",

??????????????subList:?[]

????????????},

????????????{

??????????????value:?"10002.006",

??????????????label:?"持續(xù)在賣且上配額的促銷裝",

??????????????subList:?[]

????????????},

????????????{

??????????????value:?"10002.007",

??????????????label:?"停產并無新品代替",

??????????????subList:?[

????????????????{?value:?"10002.008",?label:?"白夜",?subList:?[]?},

????????????????{?value:?"10002.009",?label:?"白夜2",?subList:?[]?}

??????????????]

????????????}

??????????]

????????}


methods:

? ? 主題思想主要是當表格渲染的同時陋守,根據表頭返回的數據獲取所有的key魂奥,并且默認所有的key為false【不可編輯】似枕,并用showEdit儲存;并且在watch下監(jiān)聽表體數據tableBody,如果數據變化就從新渲染表格著隆;

//初始化單元格狀態(tài)

????setShowEditInit()?{

??????for?(let?item?of?this.showEdit)?{

????????for?(let?subItem?in?item)?{

??????????item[subItem]?=?false;

????????}

??????}

????},

????setShowEdit()?{

??????let?tempShowEdit?=?[];

??????for?(let?item?of?this.tableBody)?{

????????let?tempShow?=?{};

????????for?(let?subItem?in?item.fieldVal)?{

??????????tempShow[subItem]?=?false;

????????}

????????tempShowEdit.push(tempShow);

??????}

??????this.showEdit?=?tempShowEdit;

????},

????//循環(huán)查找對應的下拉框

????cycleSearch(currefieId,?curreval)?{

??????let?objitem?=?[];

??????if?(currefieId?!=?"STEP1")?{

????????let?ptypeItem?=?this.cachePnameList.find(

??????????item?=>?item.value?==?curreval

????????);

????????if?(ptypeItem)?{

??????????this.selList[currefieId]?=?ptypeItem.subList;

????????}?else?{

??????????let?ptype?=?this.subcycle(curreval,?this.cachePnameList);

??????????this.selList[currefieId]?=?ptype.subList;

????????}

??????}?else?{

????????this.selList[currefieId]?=?this.cachePnameList;

??????}

????},

????//循環(huán)查找對應的值

????subcycle(subval,?subItem)?{

??????let?options?=?this.cachePnameList;

??????let?obj?=?"";

??????for?(let?i?=?0;?i?<?options.length;?i++)?{

????????let?refs?=?this.findcycle(subval,?options[i]);

????????if?($.isPlainObject(refs))?{

??????????obj?=?refs;

??????????break;

????????}?else?{

??????????continue;

????????}

??????}

??????return?obj;

????},

????findcycle(subval,?option)?{

??????let?subVal?=?option.subList.find(subItem?=>?{

????????if?(subItem.value?!=?subval)?{

??????????this.findcycle(subval,?subItem);

????????}?else?{

??????????return?subItem;

????????}

??????});

??????return?subVal;

????},

????callback(row,?cellIndex)?{

??????//獲取當前行所有的key

??????--cellIndex;

??????let?call_key?=?Object.keys(row.fieldVal)[cellIndex];

??????if?(row.fieldVal[call_key]?==?"")?{

????????return?this.callback(row,?cellIndex);

??????}?else?{

????????return?row.fieldVal[call_key];

??????}

????},

????//?切換單元格為編輯

/*當用戶雙擊某一個單元格的時候先找到對應列的key,根據得到的key去showEdit中去匹配key對應的值是否為true*/

????celldbClick(row,?column,?cell,?event)?{

??????//判斷點擊的是否為下拉框

??????let?name?=?column.className.split("?");

??????//首先判斷該單元格是否可編輯

??????if?(!row.subList[name[0]])?{

????????this.$message({?message:?"該單元格屬性不允許編輯",?type:?"warning"?});

????????return;

??????}

??????if?(name[1]?==?"ElSelect")?{

????????let?parval?=?"";

????????//獲取當前列的索引

????????let?cellIndex?=?cell.cellIndex;

????????if?(name[0]?!=?"STEP1")?{

??????????parval?=?this.callback(row,?cellIndex);

????????}

????????//單元格的類型

????????this.cycleSearch(name[0],?parval);

????????//表示每一列的名稱this.selList[name[0]]

??????}

??????this.setShowEditInit();

??????let?newObj?=?column.label;

??????let?index?=?this.tableBody.findIndex(

????????item?=>?item.fieldVal.Id?==?row.fieldVal.Id

??????);

??????this.showEdit[index][newObj]?=?!this.showEdit[index][newObj];

????},

????handleEdit(row,?index)?{

??????this.tableBody[index]?=?row;

????},

/*后臺傳入的表格數據分為表體projectList,表頭headData*/


?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末呀癣,一起剝皮案震驚了整個濱河市美浦,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌项栏,老刑警劉巖浦辨,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異沼沈,居然都是意外死亡流酬,警方通過查閱死者的電腦和手機币厕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來芽腾,“玉大人旦装,你說我怎么就攤上這事』耷叮” “怎么了同辣?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長惭载。 經常有香客問我旱函,道長,這世上最難降的妖魔是什么描滔? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任棒妨,我火速辦了婚禮,結果婚禮上含长,老公的妹妹穿的比我還像新娘券腔。我一直安慰自己,他們只是感情好拘泞,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布纷纫。 她就那樣靜靜地躺著,像睡著了一般陪腌。 火紅的嫁衣襯著肌膚如雪辱魁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天诗鸭,我揣著相機與錄音染簇,去河邊找鬼。 笑死强岸,一個胖子當著我的面吹牛锻弓,可吹牛的內容都是我干的。 我是一名探鬼主播蝌箍,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼青灼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了妓盲?” 一聲冷哼從身側響起聚至,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎本橙,沒想到半個月后扳躬,有當地人在樹林里發(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年贷币,在試婚紗的時候發(fā)現(xiàn)自己被綠了击胜。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡役纹,死狀恐怖偶摔,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情促脉,我是刑警寧澤辰斋,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站瘸味,受9級特大地震影響宫仗,放射性物質發(fā)生泄漏。R本人自食惡果不足惜旁仿,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一藕夫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧枯冈,春花似錦毅贮、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至炫加,卻和暖如春铸题,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背琢感。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留探熔,地道東北人驹针。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像诀艰,于是被迫代替她去往敵國和親柬甥。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內容