vue如何開發一個複雜場景的動態數據表格？
簡單的數據表格可以通過配置一個數據源，一個表格列配置來實現，但這隻能實現簡單的需求。例如這樣的
Edit fiddle - JSFiddle但是在實際項目中表格應該更複雜，數據是非同步獲取的，請求可以帶搜索條件，表格列顯示的內容並不是簡單的數據，可能是另一個組件，等等情況。例如下面的原型，其中第一列「普通會員「是個tooltip組件，最後一列更多是個彈出菜單。Untitled Document
如何優雅地實現這樣的需求呢？
謝邀。
之前寫了個vue的表格組件，當然是想完全數據驅動視圖，把後端拿的數據丟給他展示一個表格，然後就完事，然而確實表格不是我們想到那麼簡單。。。看到這個題主提問題還是有同樣的感受。先說數據來源，我想的是表格組件也只是一個單純由數據驅動的組件，我給他數據它渲染表格就行了，所以，關於表格的數據的非同步獲取，搜索，排序都是操作這裡的tableData就可以完成。
在這個表格組件中，我定義了checkbox， state（其實是一個tag 組件），還有actions （button 組件 ） 這個3個組件，是引入在表格組件中，根據數據的配置渲染出來的。
題主提到的tooltip 組件應該可以通過這種方式嵌入到表格中，這個是能實現的，至於彈出菜單，是那種下拉按鈕嗎？ 應該也是類似這裡的actions實現的方法，定義組件和函數回調。
今天還被提了一個想在表格當前列直接展開詳情來編輯，我還是選擇懵逼了，又得讓表格里注入更多組件，當初還以為表格嘛，多簡單！
這個表格組件是長這樣的：
TableData: {
options: {
select: true,
state: true
},
columns: [{
index: 0,
key: "id",
value: "ID",
sort: {
state: false,
func: (e, col) =&> {
this.sortBy(col)
}
}
}, {
index: 1,
key: "name",
value: "姓名"
}, {
index: 2,
key: "age",
value: "年齡",
sort: {
state: false,
func: (e, col) =&> {
this.sortBy(col)
}
}
}, {
index: 3,
key: "wechat",
value: "微信"
}],
actions: [{
type: "button",
text: "編輯",
func: (e, row) =&> {
this.editTable(row)
}
}, {
type: "button",
text: "刪除",
func: (e, row) =&> {
console.log(row)
this.removeTableItem(row)
}
}],
tableData: [{
id: 1,
name: "王尼瑪",
age: "33",
wechat: "wangnima",
state: {
type: "success",
value: "批准"
},
checkbox: {
disabled: false,
checked: false,
text: ""
}
}, {
id: 2,
name: "趙鐵柱",
age: "26",
wechat: "Iron-column-zhao",
state: {
type: "info",
value: "待審"
},
checkbox: {
disabled: false,
checked: false,
text: ""
}
}, {
id: 3,
name: "張全蛋",
age: "27",
wechat: "Michael Jack",
state: {
type: "failed",
value: "拒絕"
},
checkbox: {
disabled: false,
checked: false,
text: ""
}
}]
}
我們的產品 Treation 是一個無比靈活的在線表格，前端用的就是 Vue.js，歡迎來和我們的開發交流。
來來來，看看這個vue table 組件如何 ,上圖：
現在還在持續更新，單元格編輯、全選等功能都已加入
可以看看這個組件fish-table
手機答，思路其實還是圍繞數據源和列配置
非同步數據。我當時是配合Vue-router使用的，通過router的data鉤子在路由改變時獲取數據，請求條件都是在URL裡面的，然後寫一個搜索框組件改變路由，在改變路由之後會自動重新請求，拿到新的數據源傳給props。同理，翻頁也可以用這個實現。不用路由的話自己寫一個watch也可以實現。
表格篩選。可以在內部將props賦值給內部data，渲染表格也用這個data。然後根據篩選條件修改data即可。
複雜表格項。列配置詳細一點，每個列的配置是一個對象，包含欄位名和一個render函數，在表格渲染時先確認是否有render函數，有則使用該函數渲染，將所需數據傳給該函數。然後配置的時候，可以在render裡面設置對應的複雜組件。（這個是react的思路，Vue好像不能用函數渲染……或許可以改成render配置然後表格內部有個render函數根據配置來渲染，但是這樣的話配置不太靈活，暫時沒什麼好的想法……）要不試試 OneWayTech/vue2-datatable ？目前尚未遇到其未能實現的需求
推薦閱讀：