可擴充套件的自定義table元件

vue

class="table-with-label">
class="table-th">
class="th-title">
v-for="(item, index) in viewdata"
:key="index"
:width="item.width">
}li>
ul>
div>
class="table-tbody">
class="body-data">
v-if="tabledata.length"
class="th-title tbody-box"
v-for="(items, indexs) in tabledata"
:key="indexs">
class="tbody-inner"
v-for="(item, index) in viewdata"
:key="index"
:width="item.width">
// 普通文字顯示
v-if="item.type === 'text'">
}span>
// 需要傳值操作的dom
v-if="item.type === 'setting'">
name="setting"
:index="indexs"
:tabledata="tabledata">
slot>
div>
li>
// 另起一行的dom，可以為每一條資料打標籤
class="label-box">
name="timepicker"
:item="items">
slot>
div>
ul>
// 空狀態
v-if="!tabledata.length"
class="no-data">
}span>
div>
div>
div>
template>
src="./label.js">
script>
lang="less"
src="./label.less">
style>

import $ from 'jquery'

import tools from './../../utils/tools'
export default 
},props: 
},// table資料來源
tabledata: }},
// 是否在標籤上顯示繫結屬性
inheritattrs: false,
watch: )}},
created () 
},methods: ,
setdomwidth () 
if (attrs && attrs.thbodycolor) 
// 遍歷容器寬度
for (let value of th) )
}let index = 0
// 遍歷button顏色
for (let value of btn) 
// js設定tbody高度
if (this.sethiddenheight) }},
mounted () 
}

.table-with-label 

}// th
.table-th 
}// tbody
.table-tbody 
.tbody-box
:last-child 
.th-title 
.select-span 
}// 標籤
.label-box 
.label-box-body }}
}}
// 無資料狀態
.no-data }}
}

ant design的Table元件自定義空狀態

table,是antd中乙個我們經常使用的元件，在官方文件中給出了非常詳細的例項以及api，但在我們在使用過程中可能需要根據專案的要求來定製空狀態時的展示。什麼是空狀態呢？在antd的官方文件中他是這麼說的 我們需要做的就是要自定義table的 empty 空狀態 但是在查詢官方文件的過程中，我們並...

可自由拖動的自定義元件

通過監聽元件touch事件，來改變元件的left和top的樣式 1.首先，touchstart時，拿到元件初始狀態時的位置 2.touchmove，實時拿到元件的位置，並修改元件的left和top的值 3.如果要求吸附到旁邊，在touchend時，看最後元件的位置是偏向於左邊還是右邊，如果偏向於左邊...

QML自定義元件實現（擴充套件外掛程式）

qml 的元件 控制項 已經有很多了，在安裝目錄的qml下。例如 c qt qt5.12.0 5.12.0 mingw73 64 qml或者 c qt qt5.12.0 5.12.0 msvc2015 64 qml 最常用的是 qtquick和qtquick2.那麼，如何自定義新增的庫呢？比如想自己...