資訊專欄INFORMATION COLUMN
摘要：最近在搗鼓項(xiàng)目，恰好用到組件，之前寫了個(gè)，后面一直都想寫一個(gè)像樣的，可以分享給別人用的組件。自己的水平一般，開發(fā)出來的組件可能代碼不咋地，還望路過大神斧正。
uniapp是2019年非常的火爆的一個(gè)Dcloud開發(fā)跨平臺前端工具，支持ios android wap，小程序，除了android有點(diǎn)卡外，其他暫時(shí)沒有發(fā)現(xiàn)什么瑕疵。
最近在搗鼓uniapp項(xiàng)目，恰好用到table組件，之前寫了個(gè)demo，后面一直都想寫一個(gè)像樣的，可以分享給別人用的組件。
自己的水平一般，開發(fā)出來的組件可能代碼不咋地，還望路過大神斧正。
下面是我寫的uniapptable的說明，希望能夠幫到別人
這里默認(rèn)大家都非常熟悉vue和uniapp的包引入，不再闡述uniapp組件引入方法以及uniapp組件和vue的區(qū)別 插件市場更新會比github更新延后，查看github項(xiàng)目 插件市場更新會比github更新延后，查看demo源碼 插件市場更新會比github更新延后，查看demo使用引入方式 支持功能大概如下 點(diǎn)擊查看demo,PC瀏覽器模擬顯示和真實(shí)移動設(shè)備訪問有差異 行合并 列合并 固定table高度 數(shù)據(jù)加載 數(shù)據(jù)為空 自定義行樣式 自定義某行樣式 自定義某行某列某個(gè)單元格樣式 使用插槽自定義單元格內(nèi)容 數(shù)據(jù)多選操作 數(shù)據(jù)單選操作 數(shù)據(jù)刪除&&數(shù)據(jù)編輯或者更多操作方式 固定右邊一列 固定左邊一列 固定高度不支持同時(shí)固定某一列 已測試平臺 ->ios，android，wap，微信小程序 部分效果預(yù)覽javascript (data數(shù)組必須提供id)
import vTable from "@/components/table.vue"
export default{
components: {
vTable
},
data(){
return {
data: [{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
id: "1",
}
],
columns: [{
title: "ID",
key: "id"
},
{
title: "Name",
key: "name"
},
{
title: "Age",
key: "age"
},
{
title: "Address",
key: "address"
}
],
}
}
}
基本屬性
html標(biāo)簽屬性
| 屬性 | 說明 | 類型 | 默認(rèn) | 必填 |
|---|---|---|---|---|
| columns | 列數(shù)據(jù) | Array | -- | 必填 |
| dataColSpan | 行數(shù)據(jù) | Array | -- | 必填 |
| row-class-name | 行樣式 | String或Function | -- | -- |
| height | 表格高度(可用固定表頭) | Number | -- | -- |
| td-height | 單元格高 | Number | 110 | -- |
| td-width | 單元格寬 | Number | 30 | -- |
| td-padding | 單元格間距 | Number | 10 | -- |
| border-color | 表格邊框顏色 | String | #666 | -- |
| th-td-height | 表頭單元格高 | Number | 30 | -- |
| loading | 加載狀態(tài) | Boolean | false | -- |
| selection | 可選mulit和single | String | -- | -- |
| span-method | 行列合并 | Function | -- | -- |
| slot-cols | 插槽自定義列元素,對應(yīng)columns的key | Array | -- | -- |
| emptyText | 插沒數(shù)據(jù)提示文字 | String | -- | -- |
| emptyClickFn | 沒數(shù)據(jù)點(diǎn)擊響應(yīng)函數(shù) | Function | -- | -- |
| 屬性 | 說明 | 參數(shù) |
|---|---|---|
| @on-selection-change | 單選 多選變更 | {old:"",new:""} |
| @delete | 自定義事件(它可以不叫delete，可以是任意事件，只要你在list里面定義了) | {row:{},index:Number} |
| 屬性 | 說明 | 類型 |
|---|---|---|
| cellClassName | 設(shè)置行內(nèi)某一列的樣式類名 | Object |
| operate | 數(shù)據(jù)操作的列 | Object |
| 屬性 | 說明 | 類型 |
|---|---|---|
| $width | 設(shè)置列寬度 例如 "120px",請務(wù)必使用px單位 | String |
| $fixed | 固定某一列，可選left和right | String |
| $operateList | 數(shù)據(jù)操作選項(xiàng)和list的operate對應(yīng) | Array |
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106414.html
摘要：官方資料微信公眾平臺注冊小程序。官網(wǎng)開發(fā)文檔社區(qū)開發(fā)工具部署微信小程序微信小程序本身不需要部署，在微信開發(fā)工具中直接上傳代碼就行。 為什么 學(xué)習(xí) Java 三年，目前已經(jīng)工作了2年，因?yàn)樽詫W(xué)，基礎(chǔ)差，所以打算年末總結(jié)一下常見的基礎(chǔ)知識和面試點(diǎn)； 也可以通過獨(dú)立做一個(gè)項(xiàng)目整合自己工作期間學(xué)習(xí)的知識，加深印象。 但是想著回家或是平時(shí)手機(jī)用的多，做一款A(yù)PP和小程序很方便查看。 項(xiàng)目展示 本...
在微信小程序開發(fā)中用新功能利用uni-app來開發(fā)，我們看看都有哪些優(yōu)缺？ 首選我們看看官網(wǎng)給出的解決思路方案 https://uniapp.dcloud.io/hybrid 方式1：把原生小程序轉(zhuǎn)換為uni-app源碼。有各種轉(zhuǎn)換工具，詳見 方式2：新建一個(gè)uni-app項(xiàng)目，把原生小程序的代碼變成小程序組件，進(jìn)而整合到uni-app項(xiàng)目下。uni-app支持使用小程序wxml組件，...
閱讀 2245·2023-04-26 01:57
閱讀 3269·2023-04-25 16:30
閱讀 2338·2021-11-17 09:38
閱讀 1093·2021-10-08 10:14
閱讀 1398·2021-09-23 11:21
閱讀 3696·2019-08-29 17:28
閱讀 3468·2019-08-29 15:27
閱讀 956·2019-08-29 13:04
