mirror of
https://github.com/yangzongzhuan/RuoYi-App.git
synced 2025-09-27 22:52:40 +00:00
升级uni-ui到最新版本1.5.7
This commit is contained in:
RuoYi
@@ -35,8 +35,13 @@
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTable',
|
||||
options: {
|
||||
virtualHost: true
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
emits:['selection-change'],
|
||||
props: {
|
||||
@@ -90,10 +95,10 @@ export default {
|
||||
if (this.theadChildren) {
|
||||
rowspan = this.theadChildren.rowspan
|
||||
}
|
||||
|
||||
|
||||
// this.trChildren.length - rowspan
|
||||
this.noData = false
|
||||
// this.noData = newVal.length === 0
|
||||
// this.noData = newVal.length === 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -247,9 +252,9 @@ export default {
|
||||
if (!this.theadChildren) {
|
||||
theadChildren = this.trChildren[0]
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let childDomIndex = this.trChildren.findIndex((item, index) => child === item)
|
||||
if(childDomIndex < 0){
|
||||
childDomIndex = this.data.findIndex(v=>v[this.rowKey] === keyValue) + 1
|
||||
|
||||
@@ -12,12 +12,17 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'uniBody',
|
||||
options: {
|
||||
virtualHost: true
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -22,8 +22,13 @@
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTd',
|
||||
options: {
|
||||
virtualHost: true
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
props: {
|
||||
width: {
|
||||
|
||||
@@ -40,8 +40,13 @@
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTh',
|
||||
options: {
|
||||
virtualHost: true
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
components: {
|
||||
// #ifdef H5
|
||||
@@ -106,8 +111,13 @@ export default {
|
||||
if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
|
||||
return this.width.replace('px', '')
|
||||
} else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
|
||||
let numberRpx = Number(this.width.replace('rpx', ''))
|
||||
let widthCoe = uni.getSystemInfoSync().screenWidth / 750
|
||||
let numberRpx = Number(this.width.replace('rpx', ''))
|
||||
// #ifdef MP-WEIXIN
|
||||
let widthCoe = uni.getWindowInfo().screenWidth / 750
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
let widthCoe = uni.getSystemInfoSync().screenWidth / 750
|
||||
// #endif
|
||||
return Math.round(numberRpx * widthCoe)
|
||||
} else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
|
||||
return this.width
|
||||
|
||||
@@ -3,127 +3,135 @@
|
||||
<thead class="uni-table-thead">
|
||||
<tr class="uni-table-tr">
|
||||
<th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
|
||||
<table-checkbox :indeterminate="indeterminate" :checked="checked" @checkboxSelected="checkboxSelected"></table-checkbox>
|
||||
<table-checkbox :indeterminate="indeterminate" :checked="checked"
|
||||
@checkboxSelected="checkboxSelected"></table-checkbox>
|
||||
</th>
|
||||
</tr>
|
||||
<slot></slot>
|
||||
</thead>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="uni-table-thead"><slot></slot></view>
|
||||
<view class="uni-table-thead">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tableCheckbox from '../uni-tr/table-checkbox.vue'
|
||||
export default {
|
||||
name: 'uniThead',
|
||||
components: {
|
||||
tableCheckbox
|
||||
},
|
||||
options: {
|
||||
virtualHost: true
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
border: false,
|
||||
selection: false,
|
||||
rowspan: 1,
|
||||
indeterminate: false,
|
||||
checked: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.root = this.getTable()
|
||||
// #ifdef H5
|
||||
this.root.theadChildren = this
|
||||
// #endif
|
||||
this.border = this.root.border
|
||||
this.selection = this.root.type
|
||||
},
|
||||
methods: {
|
||||
init(self) {
|
||||
this.rowspan++
|
||||
import tableCheckbox from '../uni-tr/table-checkbox.vue'
|
||||
export default {
|
||||
name: 'uniThead',
|
||||
components: {
|
||||
tableCheckbox
|
||||
},
|
||||
checkboxSelected(e) {
|
||||
this.indeterminate = false
|
||||
const backIndexData = this.root.backIndexData
|
||||
const data = this.root.trChildren.filter(v => !v.disabled && v.keyValue)
|
||||
if (backIndexData.length === data.length) {
|
||||
this.checked = false
|
||||
this.root.clearSelection()
|
||||
} else {
|
||||
this.checked = true
|
||||
this.root.selectionAll()
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
border: false,
|
||||
selection: false,
|
||||
rowspan: 1,
|
||||
indeterminate: false,
|
||||
checked: false
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getTable(name = 'uniTable') {
|
||||
let parent = this.$parent
|
||||
let parentName = parent.$options.name
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name
|
||||
created() {
|
||||
this.root = this.getTable()
|
||||
// #ifdef H5
|
||||
this.root.theadChildren = this
|
||||
// #endif
|
||||
this.border = this.root.border
|
||||
this.selection = this.root.type
|
||||
},
|
||||
methods: {
|
||||
init(self) {
|
||||
this.rowspan++
|
||||
},
|
||||
checkboxSelected(e) {
|
||||
this.indeterminate = false
|
||||
const backIndexData = this.root.backIndexData
|
||||
const data = this.root.trChildren.filter(v => !v.disabled && v.keyValue)
|
||||
if (backIndexData.length === data.length) {
|
||||
this.checked = false
|
||||
this.root.clearSelection()
|
||||
} else {
|
||||
this.checked = true
|
||||
this.root.selectionAll()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getTable(name = 'uniTable') {
|
||||
let parent = this.$parent
|
||||
let parentName = parent.$options.name
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name
|
||||
}
|
||||
return parent
|
||||
}
|
||||
return parent
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$border-color: #ebeef5;
|
||||
$border-color: #ebeef5;
|
||||
|
||||
.uni-table-thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
.uni-table-thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.uni-table-tr {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: table-row;
|
||||
transition: all 0.3s;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
border: 1px red solid;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
padding: 0 8px;
|
||||
width: 26px;
|
||||
padding-left: 12px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
/* #endif */
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px $border-color solid;
|
||||
font-size: 14px;
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
.tr-table--border {
|
||||
border-right: 1px $border-color solid;
|
||||
}
|
||||
|
||||
.uni-table-tr {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: table-row;
|
||||
transition: all 0.3s;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
border: 1px red solid;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.uni-table-tr {
|
||||
::v-deep .uni-table-th {
|
||||
&.table--border:last-child {
|
||||
// border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
padding: 0 8px;
|
||||
width: 26px;
|
||||
padding-left: 12px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
/* #endif */
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px $border-color solid;
|
||||
font-size: 14px;
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
.tr-table--border {
|
||||
border-right: 1px $border-color solid;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-table-tr {
|
||||
::v-deep .uni-table-th {
|
||||
&.table--border:last-child {
|
||||
// border-right: none;
|
||||
::v-deep .uni-table-td {
|
||||
&.table--border:last-child {
|
||||
// border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uni-table-td {
|
||||
&.table--border:last-child {
|
||||
// border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
/* #endif */
|
||||
</style>
|
||||
|
||||
@@ -2,16 +2,18 @@
|
||||
<!-- #ifdef H5 -->
|
||||
<tr class="uni-table-tr">
|
||||
<th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
|
||||
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
|
||||
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled"
|
||||
@checkboxSelected="checkboxSelected"></table-checkbox>
|
||||
</th>
|
||||
<slot></slot>
|
||||
<slot></slot>
|
||||
<!-- <uni-th class="th-fixed">123</uni-th> -->
|
||||
</tr>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="uni-table-tr">
|
||||
<view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
|
||||
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
|
||||
<view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
|
||||
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled"
|
||||
@checkboxSelected="checkboxSelected"></table-checkbox>
|
||||
</view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
@@ -20,152 +22,163 @@
|
||||
|
||||
<script>
|
||||
import tableCheckbox from './table-checkbox.vue'
|
||||
/**
|
||||
* Tr 表格行组件
|
||||
* @description 表格行组件 仅包含 th,td 组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTr',
|
||||
components: { tableCheckbox },
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
/**
|
||||
* Tr 表格行组件
|
||||
* @description 表格行组件 仅包含 th,td 组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTr',
|
||||
components: {
|
||||
tableCheckbox
|
||||
},
|
||||
keyValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
options: {
|
||||
virtualHost: true
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
border: false,
|
||||
selection: false,
|
||||
widthThArr: [],
|
||||
ishead: true,
|
||||
checked: false,
|
||||
indeterminate:false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.root = this.getTable()
|
||||
this.head = this.getTable('uniThead')
|
||||
if (this.head) {
|
||||
this.ishead = false
|
||||
this.head.init(this)
|
||||
}
|
||||
this.border = this.root.border
|
||||
this.selection = this.root.type
|
||||
this.root.trChildren.push(this)
|
||||
const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
|
||||
if(rowData){
|
||||
this.rowData = rowData
|
||||
}
|
||||
this.root.isNodata()
|
||||
},
|
||||
mounted() {
|
||||
if (this.widthThArr.length > 0) {
|
||||
const selectionWidth = this.selection === 'selection' ? 50 : 0
|
||||
this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
|
||||
}
|
||||
},
|
||||
// #ifndef VUE3
|
||||
destroyed() {
|
||||
const index = this.root.trChildren.findIndex(i => i === this)
|
||||
this.root.trChildren.splice(index, 1)
|
||||
this.root.isNodata()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
unmounted() {
|
||||
const index = this.root.trChildren.findIndex(i => i === this)
|
||||
this.root.trChildren.splice(index, 1)
|
||||
this.root.isNodata()
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
minWidthUpdate(width) {
|
||||
this.widthThArr.push(width)
|
||||
},
|
||||
// 选中
|
||||
checkboxSelected(e) {
|
||||
let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
|
||||
this.checked = e.checked
|
||||
this.root.check(rootData||this, e.checked,rootData? this.keyValue:null)
|
||||
},
|
||||
change(e) {
|
||||
this.root.trChildren.forEach(item => {
|
||||
if (item === this) {
|
||||
this.root.check(this, e.detail.value.length > 0 ? true : false)
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getTable(name = 'uniTable') {
|
||||
let parent = this.$parent
|
||||
let parentName = parent.$options.name
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
keyValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
border: false,
|
||||
selection: false,
|
||||
widthThArr: [],
|
||||
ishead: true,
|
||||
checked: false,
|
||||
indeterminate: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.root = this.getTable()
|
||||
this.head = this.getTable('uniThead')
|
||||
if (this.head) {
|
||||
this.ishead = false
|
||||
this.head.init(this)
|
||||
}
|
||||
this.border = this.root.border
|
||||
this.selection = this.root.type
|
||||
this.root.trChildren.push(this)
|
||||
const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
|
||||
if (rowData) {
|
||||
this.rowData = rowData
|
||||
}
|
||||
this.root.isNodata()
|
||||
},
|
||||
mounted() {
|
||||
if (this.widthThArr.length > 0) {
|
||||
const selectionWidth = this.selection === 'selection' ? 50 : 0
|
||||
this.root.minWidth = Number(this.widthThArr.reduce((a, b) => Number(a) + Number(b))) + selectionWidth;
|
||||
}
|
||||
},
|
||||
// #ifndef VUE3
|
||||
destroyed() {
|
||||
const index = this.root.trChildren.findIndex(i => i === this)
|
||||
this.root.trChildren.splice(index, 1)
|
||||
this.root.isNodata()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
unmounted() {
|
||||
const index = this.root.trChildren.findIndex(i => i === this)
|
||||
this.root.trChildren.splice(index, 1)
|
||||
this.root.isNodata()
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
minWidthUpdate(width) {
|
||||
this.widthThArr.push(width)
|
||||
if (this.widthThArr.length > 0) {
|
||||
const selectionWidth = this.selection === 'selection' ? 50 : 0;
|
||||
this.root.minWidth = Number(this.widthThArr.reduce((a, b) => Number(a) + Number(b))) + selectionWidth;
|
||||
}
|
||||
},
|
||||
// 选中
|
||||
checkboxSelected(e) {
|
||||
let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
|
||||
this.checked = e.checked
|
||||
this.root.check(rootData || this, e.checked, rootData ? this.keyValue : null)
|
||||
},
|
||||
change(e) {
|
||||
this.root.trChildren.forEach(item => {
|
||||
if (item === this) {
|
||||
this.root.check(this, e.detail.value.length > 0 ? true : false)
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getTable(name = 'uniTable') {
|
||||
let parent = this.$parent
|
||||
let parentName = parent.$options.name
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name
|
||||
}
|
||||
return parent
|
||||
}
|
||||
return parent
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$border-color: #ebeef5;
|
||||
$border-color: #ebeef5;
|
||||
|
||||
.uni-table-tr {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: table-row;
|
||||
transition: all 0.3s;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
padding: 0 8px;
|
||||
width: 26px;
|
||||
padding-left: 12px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
/* #endif */
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px $border-color solid;
|
||||
font-size: 14px;
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
.tr-table--border {
|
||||
border-right: 1px $border-color solid;
|
||||
}
|
||||
|
||||
.uni-table-tr {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: table-row;
|
||||
transition: all 0.3s;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
.uni-table-tr {
|
||||
::v-deep .uni-table-th {
|
||||
&.table--border:last-child {
|
||||
// border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
padding: 0 8px;
|
||||
width: 26px;
|
||||
padding-left: 12px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
/* #endif */
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px $border-color solid;
|
||||
font-size: 14px;
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
.tr-table--border {
|
||||
border-right: 1px $border-color solid;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-table-tr {
|
||||
::v-deep .uni-table-th {
|
||||
&.table--border:last-child {
|
||||
// border-right: none;
|
||||
::v-deep .uni-table-td {
|
||||
&.table--border:last-child {
|
||||
// border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uni-table-td {
|
||||
&.table--border:last-child {
|
||||
// border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
/* #endif */
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user