uniapp table 組件

Vultr 發布于2019-08-26 10:35 / 1703人閱讀

摘要：最近在搗鼓項目，恰好用到組件，之前寫了個，后面一直都想寫一個像樣的，可以分享給別人用的組件。自己的水平一般，開發出來的組件可能代碼不咋地，還望路過大神斧正。

uniapp是2019年非常的火爆的一個Dcloud開發跨平臺前端工具，支持ios android wap，小程序，除了android有點卡外，其他暫時沒有發現什么瑕疵。

最近在搗鼓uniapp項目，恰好用到table組件，之前寫了個demo，后面一直都想寫一個像樣的，可以分享給別人用的組件。

自己的水平一般，開發出來的組件可能代碼不咋地，還望路過大神斧正。

下面是我寫的uniapptable的說明，希望能夠幫到別人

這里默認大家都非常熟悉vue和uniapp的包引入，不再闡述uniapp組件引入方法以及uniapp組件和vue的區別 插件市場更新會比github更新延后，查看github項目 插件市場更新會比github更新延后，查看demo源碼 插件市場更新會比github更新延后，查看demo使用引入方式 支持功能大概如下 點擊查看demo,PC瀏覽器模擬顯示和真實移動設備訪問有差異 行合并 列合并 固定table高度 數據加載 數據為空 自定義行樣式 自定義某行樣式 自定義某行某列某個單元格樣式 使用插槽自定義單元格內容 數據多選操作 數據單選操作 數據刪除&&數據編輯或者更多操作方式 固定右邊一列 固定左邊一列 固定高度不支持同時固定某一列 已測試平臺 ->ios，android，wap，微信小程序 部分效果預覽

基本使用示例源碼 html

javascript (data數組必須提供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標簽屬性

屬性	說明	類型	默認	必填
columns	列數據	Array	--	必填
dataColSpan	行數據	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	加載狀態	Boolean	false	--
selection	可選mulit和single	String	--	--
span-method	行列合并	Function	--	--
slot-cols	插槽自定義列元素,對應columns的key	Array	--	--
emptyText	插沒數據提示文字	String	--	--
emptyClickFn	沒數據點擊響應函數	Function	--	--

事件

屬性	說明	參數
@on-selection-change	單選多選變更	{old:"",new:""}
@delete	自定義事件(它可以不叫delete，可以是任意事件，只要你在list里面定義了)	{row:{},index:Number}

list 參數

屬性	說明	類型
cellClassName	設置行內某一列的樣式類名	Object
operate	數據操作的列	Object

columns 參數

屬性	說明	類型
$width	設置列寬度例如 "120px",請務必使用px單位	String
$fixed	固定某一列，可選left和right	String
$operateList	數據操作選項和list的operate對應	Array

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106414.html

Java 初學者做的第一個微信小程序總結--關于Java基礎

摘要：官方資料微信公眾平臺注冊小程序。官網開發文檔社區開發工具部署微信小程序微信小程序本身不需要部署，在微信開發工具中直接上傳代碼就行。為什么學習 Java 三年，目前已經工作了2年，因為自學，基礎差，所以打算年末總結一下常見的基礎知識和面試點；也可以通過獨立做一個項目整合自己工作期間學習的知識，加深印象。但是想著回家或是平時手機用的多，做一款APP和小程序很方便查看。項目展示本...

mudiyouyou 2019-08-16 14:30 評論0 收藏0
解析uni-app和原生小程序混合開發的具體實現過程

　　在微信小程序開發中用新功能利用uni-app來開發，我們看看都有哪些優缺？　　首選我們看看官網給出的解決思路方案　　https://uniapp.dcloud.io/hybrid　　方式1：把原生小程序轉換為uni-app源碼。有各種轉換工具，詳見　　方式2：新建一個uni-app項目，把原生小程序的代碼變成小程序組件，進而整合到uni-app項目下。uni-app支持使用小程序wxml組件，...

3403771864 2022-10-10 22:46 評論0 收藏0