iT邦幫忙

1

Vue element ui table 增加空白行並在裡面添加任意內容的技術?

  • 分享至 

  • xImage

官方組件說明table要增加行列只要透過增加資料即可,但如果要增加一列且是完全空白的一列,並在裡面放上任意資料,並不能像傳統增加tr td的方式,該如何做到呢?


codepen:https://codepen.io/ofcourse448/pen/dyPxJVm

我把問題說具體一點
由於這個table組件要新增資料列,典型的都是在陣列上增加資料,但是我今天想做一個methods,它可以插入資料在我想插入的列下方,但是它可能只是一組任意資料而且是合併儲存格的那種。

例如像這樣,下方它不是一個物件,裡面沒有id、name、message了,他是一個單獨的列。

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
dragonH
iT邦超人 5 級 ‧ 2020-02-03 09:55:47
最佳解答

雖然我覺得這樣問很失禮

不過你要的是這樣嗎?

codepen

看更多先前的回應...收起先前的回應...

哈哈 大哥...

dragonH iT邦超人 5 級 ‧ 2020-02-03 10:22:46 檢舉

ofcourse448

她有個合併行列可以用

看看是不是你要的

codepen 我更新了

謝大哥但如果資料是可以讓我填入任意資料呢?
比如 "今天天氣很好" 不侷限一定要綁定在tableData上,可以另外在宣告一個data讓它綁

不然我直接說我想做的事好了 我想做一個類似像信箱收信的表格
有 日期 姓名 信件標題
在點選信件標題的時候 下方會跳出信件內容 就像table組件有一個叫做"展開行"的官方樣式
但是我不要那個三角箭頭 我想要點文字跳出
就是這個需求一直想破頭。

比如點商品ID 然後trigger它跳出內容 那個內容我可以去撈API什麼的 因為我一直想用element ui 做這件事 不知道能不能成 但是又被限制不要那個三角箭頭XD 用點字的方式展開

我一開始不直接提這個需求是我有把其他流程都想好應該可以做 只差在下面增加一個列(可以添加任意資料的空白列)

froce iT邦大師 1 級 ‧ 2020-02-03 11:43:46 檢舉

你一開始就該預留「備註」欄位,有備註就這樣顯示,沒就不顯示。

dragonH iT邦超人 5 級 ‧ 2020-02-03 11:44:16 檢舉

ofcourse448

codepen

剩下的自己綁 method 到 name

然後有個 toggleRowExpansion method 可以用

謝大哥 我從你給我的關鍵字 toggleRowExpansion 找到一個更神奇的方法 等我有空貼上來給你瞧瞧... 你幫我去回答那認領一下最佳解 拜託

dragonH iT邦超人 5 級 ‧ 2020-02-03 21:01:06 檢舉

ofcourse448

我不喜歡神奇的方法XD /images/emoticon/emoticon01.gif

codepen 我補完了code

應該是你要的

大哥你這比我昨天那版本又俗又有力 我要用它了 謝謝啦!!!!!!!!
這是我昨天看到的版本
https://www.cnblogs.com/e-cat/p/10532982.html

哦哦我一直以為直接回覆在我第一樓 原來這是第二樓

XDD

那趁熱再問一個codepen的問題
我朋友說為什不能fork我的codepen 他說之前都可以 這是什麼意思?

dragonH iT邦超人 5 級 ‧ 2020-02-04 09:51:57 檢舉

ofcourse448

原本右上的不見了

右下有一個 fork 能按

謝謝 那如果經常想拿同份code大改 但是又想保留原本那份
我的意思是 複製新的一份pen直接改 舊的那份留著
有這種功能嗎 暫時找不到XD

dragonH iT邦超人 5 級 ‧ 2020-02-04 10:11:05 檢舉

ofcourse448

阿就是 fork 阿/images/emoticon/emoticon26.gif

然後大哥 我又發現一件怪事 就是 我拿你那份code來用 一模一樣沒改 在專案上那符號卻一樣有顯示

哦喔XD fork不是叉子嗎

就是昨天我說的那個三角形符號 他在codepen上沒有 但是在專案上卻是有的.............................................

在html檔也確定沒有三角符號

藍受 香菇

dragonH iT邦超人 5 級 ‧ 2020-02-04 10:28:38 檢舉

css 那邊需要改

.el-table__expand-icon {
  display: none;
}

我要發表回答

立即登入回答