793 lines
21 KiB
Vue
793 lines
21 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1 407 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-table__wrap" :style="{height:height>0 || height!=0?height+'rpx':'auto',width:width+'px'}">
|
||
<!-- #ifdef MP-BAIDU -->
|
||
<scroll-view :show-scrollbar="false" scroll-x
|
||
:style="{width:width+'px',height:height>0 || height!=0?height+'rpx':'auto'}" class="fui-table__scroll-view"
|
||
:class="{'fui-table__flex-row':!height || height==0}">
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-BAIDU -->
|
||
<scroll-view :show-scrollbar="false" :scroll-x="true" :scroll-y="height>0 && height!=0"
|
||
:style="{width:width+'px',height:height>0 || height!=0?height+'rpx':'auto'}"
|
||
class="fui-table__scroll-view" :class="{'fui-table__flex-row':!height || height==0}">
|
||
<!-- #endif -->
|
||
<view class="fui-table--inner" :style="{width:totalW+'px'}">
|
||
<view class="fui-table--tr"
|
||
:class="{'fui-table__border-bottom':horBorder,'fui-table__border-top':horBorder && show,'fui-table--header-fixed':fixed}"
|
||
:style="{borderBottomColor:horBorder?borderColor:'transparent',borderTopColor:horBorder && show?borderColor:'transparent'}"
|
||
v-if="show">
|
||
<view class="fui-table--td"
|
||
:class="{'fui-table__border-right':border,'fui-table__border-left':border && index===0,'fui-table__center': (item.align || align)==='center','fui-table__right':(item.align || align)==='right','fui-table--col-fixed':item.fixed && !isNvue}"
|
||
:style="{borderRightColor:border?borderColor:'transparent',borderLeftColor:border && index===0?borderColor:'transparent',background:item.background || headerBgColor,width:(item.width+divideW)+'px',paddingTop:padding+'rpx',paddingBottom:padding+'rpx',left:item.fixed && item.fixed!=='right' && !isNvue?item.left+'px':'auto',right:item.fixed==='right' && !isNvue?item.right+'px':'auto'}"
|
||
v-for="(item,index) in hData" :key="index" @tap.stop="tableSort(index,false)">
|
||
<view class="fui-table__checkbox"
|
||
:class="{'fui-table__checkbox-color':(!checkboxColor || checkboxColor===true) && chkAll}"
|
||
:style="{background:chkAll ?getCheckboxColor:'transparent',borderColor:chkAll ?getCheckboxColor:checkboxBorderColor}"
|
||
v-if="item.type==='selection'" @tap.stop="selectionAll">
|
||
<view class="fui-table__checkmark"
|
||
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}"></view>
|
||
</view>
|
||
<text v-else class="fui-table--td-text"
|
||
:class="{'fui-text__center':(item.align || align)==='center','fui-text__right':(item.align || align)==='right','fui-td__ellipsis':ellipsis}"
|
||
:style="{width:(item.width+divideW)+'px',color:item.color || color,fontSize:(item.size || size)+'rpx',fontWeight:fontWeight}">{{item.label || item.prop}}</text>
|
||
<view class="fui-table__sort-icon" :style="{right:(item.sortRight || 40)+'rpx'}"
|
||
v-if="item.sortable">
|
||
<fui-icon :name="item.sort==='descending'?'turningdown':'turningup'"
|
||
:size="item.sortSize || 28"
|
||
:color="item.sort?(item.sortColor || '#333'):(item.color || color)"></fui-icon>
|
||
</view>
|
||
<view class="fui-table__td-sk" :style="{backgroundColor:borderColor}"
|
||
v-if="border && item.fixed==='right'"></view>
|
||
</view>
|
||
</view>
|
||
<view class="fui-table--tr"
|
||
:class="{'fui-table__border-bottom':horBorder,'fui-table__border-top':horBorder && !show && index===0}"
|
||
:style="{borderBottomColor:horBorder?borderColor:'transparent',borderTopColor:horBorder && !show && index===0?borderColor:'transparent'}"
|
||
v-for="(item,index) in tableData" :key="index" @tap.stop="trClick(index)">
|
||
<view class="fui-table--td"
|
||
:class="{'fui-table__border-right':border,'fui-table__border-left':border && idx===0,'fui-table__center':(model.align || align)==='center','fui-table__right':(model.align || align)==='right','fui-table__td-wrap':model.type===3,'fui-table--col-fixed':model.fixed && !isNvue}"
|
||
v-for="(model,idx) in hData" :key="model.tdId"
|
||
:style="{borderRightColor:border?borderColor:'transparent',borderLeftColor:border && idx===0?borderColor:'transparent',background:item.background || ((index+1)%2===0 && stripe?stripeColor:background),width:(model.width+divideW)+'px',paddingTop:padding+'rpx',paddingBottom:padding+'rpx',left:model.fixed && model.fixed!=='right' && !isNvue?model.left+'px':'auto',right:model.fixed==='right' && !isNvue?model.right+'px':'auto'}">
|
||
<template v-if="model.type!==3">
|
||
<view class="fui-table__checkbox"
|
||
:class="{'fui-table__checkbox-color':(!checkboxColor || checkboxColor===true) && item.is_selected,'fui-table__disabled':item.is_disabled}"
|
||
:style="{background:item.is_selected ?getCheckboxColor:'transparent',borderColor:item.is_selected ?getCheckboxColor:checkboxBorderColor}"
|
||
v-if="model.type==='selection'" @tap.stop="selectionChange(index)">
|
||
<view class="fui-table__checkmark"
|
||
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}">
|
||
</view>
|
||
</view>
|
||
<image class="fui-table--td-img" :src="item[model.prop] || ''" mode="widthFix"
|
||
v-else-if="model.type===2"
|
||
:style="{width:(model.imgWidth || 120)+'rpx',height:model.imgHeight?model.imgHeight+'rpx':'auto'}">
|
||
</image>
|
||
<text class="fui-table--td-text"
|
||
:class="{'fui-text__center':(model.align || align)==='center','fui-text__right':(model.align || align)==='right','fui-td__ellipsis':ellipsis,'fui-td__wrap':!ellipsis}"
|
||
v-else
|
||
:style="{color:getColColor(model,item[model.prop],index),fontSize:(model.textSize || textSize) +'rpx',width:(model.width+divideW)+'px'}">{{item[model.prop] || ''}}</text>
|
||
</template>
|
||
<template v-else>
|
||
<text class="fui-table--btn" :class="{'fui-td__btn-ml':j>0}"
|
||
:style="{fontSize:(btn.size || textSize) +'rpx',color:btn.color,fontWeight:btn.fontWeight || 'normal'}"
|
||
v-for="(btn,j) in model.buttons" :key="btn.bId"
|
||
@tap.stop="handleTap(index,j)">{{btn.text}}</text>
|
||
</template>
|
||
<view class="fui-table__td-sk" :style="{backgroundColor:borderColor}"
|
||
v-if="border && model.fixed==='right'"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
//非easycom模式取消注释引入字体组件，按实际路径进行调整
|
||
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
|
||
export default {
|
||
name: "fui-table",
|
||
emits: ['click', 'rowClick', 'selectionChange', 'select', 'selectAll', 'sortChange'],
|
||
// components:{
|
||
// fuiIcon
|
||
// },
|
||
props: {
|
||
header: {
|
||
type: Array,
|
||
default () {
|
||
return []
|
||
}
|
||
},
|
||
show: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
size: {
|
||
type: [Number, String],
|
||
default: 28
|
||
},
|
||
color: {
|
||
type: String,
|
||
default: '#7F7F7F'
|
||
},
|
||
fontWeight: {
|
||
type: [Number, String],
|
||
default: 600
|
||
},
|
||
headerBgColor: {
|
||
type: String,
|
||
default: '#fff'
|
||
},
|
||
fixed: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//数据集合
|
||
itemList: {
|
||
type: Array,
|
||
default () {
|
||
return []
|
||
}
|
||
},
|
||
//总宽度 < 屏幕宽度- gap*2时，是否铺满
|
||
full: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//Table 的高度，默认为自动高度，单位rpx。
|
||
height: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
//组件外层设置的左右padding值（距离屏幕左右侧距离），rpx
|
||
gap: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
//是否带有纵向边框
|
||
border: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
//是否带有横向边框
|
||
horBorder: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
//边框颜色
|
||
borderColor: {
|
||
type: String,
|
||
default: '#eee'
|
||
},
|
||
//如果有固定项，不可设置透明
|
||
background: {
|
||
type: String,
|
||
default: '#fff'
|
||
},
|
||
// 是否为斑马纹table
|
||
stripe: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//斑马纹颜色
|
||
stripeColor: {
|
||
type: String,
|
||
default: '#F8F8F8'
|
||
},
|
||
textSize: {
|
||
type: [Number, String],
|
||
default: 28
|
||
},
|
||
textColor: {
|
||
type: String,
|
||
default: '#333'
|
||
},
|
||
//单元格对齐方式:left/center/right
|
||
align: {
|
||
type: String,
|
||
default: 'center'
|
||
},
|
||
//文字超出是否省略，默认换行
|
||
ellipsis: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//单元格上下padding值，单位rpx
|
||
padding: {
|
||
type: [Number, String],
|
||
default: 20
|
||
},
|
||
//是否添加多选框
|
||
selection: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
initEmitChange: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//选择框选中后颜色
|
||
checkboxColor: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
checkboxBorderColor: {
|
||
type: String,
|
||
default: '#eee'
|
||
},
|
||
checkmarkColor: {
|
||
type: String,
|
||
default: '#fff'
|
||
}
|
||
},
|
||
watch: {
|
||
header(vals) {
|
||
this.handleHeader(vals)
|
||
},
|
||
itemList(vals) {
|
||
this.handleData(vals)
|
||
},
|
||
selection(vals) {
|
||
this.handleData(this.itemList)
|
||
}
|
||
},
|
||
computed: {
|
||
getCheckboxColor() {
|
||
let color = this.checkboxColor
|
||
// #ifdef APP-NVUE
|
||
if (!color || color === true) {
|
||
const app = uni && uni.$fui && uni.$fui.color;
|
||
color = (app && app.primary) || '#465CFF';
|
||
}
|
||
// #endif
|
||
return color
|
||
}
|
||
},
|
||
data() {
|
||
let isNvue = false
|
||
// #ifdef APP-NVUE
|
||
isNvue = true
|
||
// #endif
|
||
return {
|
||
width: 0,
|
||
//列宽度需要加上此值
|
||
divideW: 0,
|
||
hData: [],
|
||
tableData: [],
|
||
initTableData: [],
|
||
totalW: 0,
|
||
isNvue: isNvue,
|
||
scrollH: 0,
|
||
chkAll: false
|
||
};
|
||
},
|
||
created() {
|
||
this.handleHeader(this.header)
|
||
this.handleData(this.itemList)
|
||
},
|
||
methods: {
|
||
getPx(value) {
|
||
let val = parseInt(uni.upx2px(Number(value)))
|
||
return val % 2 === 0 ? val : val + 1
|
||
},
|
||
getId(index) {
|
||
return `${index}_tr_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||
},
|
||
handleHeader(header) {
|
||
if (!header || header.length === 0) return;
|
||
let vals = JSON.parse(JSON.stringify(header))
|
||
if (this.selection) {
|
||
vals.unshift({
|
||
fixed: true,
|
||
width: 100,
|
||
type: 'selection'
|
||
})
|
||
}
|
||
let winWidth = uni.getSystemInfoSync().windowWidth
|
||
let width = 0,
|
||
left = 0,
|
||
right = 0;
|
||
let len = vals.length
|
||
vals.map((item, index) => {
|
||
item.tdId = this.getId(index)
|
||
item.width = this.getPx(item.width || 200)
|
||
width += item.width
|
||
if (item.fixed) {
|
||
item.left = item.fixed !== 'right' ? left : 0;
|
||
left += item.width
|
||
}
|
||
if (item.type === 3 && item.buttons) {
|
||
item.buttons.map((btn, idx) => {
|
||
btn.bId = this.getId(index)
|
||
})
|
||
}
|
||
//空 默认排序，ascending-升序 descending-降序
|
||
if (!item.sort) {
|
||
item.sort = ''
|
||
}
|
||
})
|
||
for (let i = 0; i < len; i++) {
|
||
let item = vals[len - i - 1]
|
||
if (item && item.fixed) {
|
||
item.right = item.fixed === 'right' ? right : 0;
|
||
right += item.width
|
||
}
|
||
}
|
||
let gap = this.gap == 0 ? 0 : this.getPx(Number(this.gap) * 2)
|
||
this.totalW = width
|
||
let totalWidth = winWidth - gap
|
||
this.width = width > totalWidth ? totalWidth : width
|
||
if (this.full && totalWidth > this.width) {
|
||
this.divideW = Math.floor((totalWidth - this.width) / len)
|
||
let lastW = (totalWidth - this.width) % len
|
||
let item = vals[len - 1]
|
||
item.width += lastW
|
||
let dw = this.divideW * len + lastW
|
||
this.width += dw
|
||
this.totalW += dw
|
||
}
|
||
this.hData = vals;
|
||
},
|
||
handleData(vals) {
|
||
if (!vals || vals.length === 0) return;
|
||
let table = JSON.parse(JSON.stringify(vals))
|
||
table.map(item => {
|
||
item.is_disabled = item.is_disabled || false;
|
||
item.is_selected = item.is_selected || false;
|
||
})
|
||
this.tableData = table;
|
||
this.initTableData = JSON.parse(JSON.stringify(table))
|
||
if (this.initEmitChange) {
|
||
this.emitSelectionChange()
|
||
}
|
||
},
|
||
handleTap(index, j) {
|
||
let item = this.tableData[index]
|
||
this.$emit('click', {
|
||
item: item,
|
||
index: index,
|
||
buttonIndex: j
|
||
})
|
||
},
|
||
trClick(index) {
|
||
let item = this.tableData[index]
|
||
this.$emit('rowClick', {
|
||
item: item,
|
||
index: index
|
||
})
|
||
},
|
||
getColColor(model, value, index) {
|
||
let color = '';
|
||
if (model.fn && typeof model.fn === 'function') {
|
||
color = model.fn(value, index)
|
||
}
|
||
return color || model.textColor || this.textColor
|
||
},
|
||
columnColorMethod(fn, prop) {
|
||
if (!fn || !prop) return;
|
||
const data = this.hData;
|
||
const index = data.findIndex(item => item.prop === prop)
|
||
if (index !== -1) {
|
||
let item = data[index]
|
||
item.fn = fn
|
||
this.hData = data;
|
||
}
|
||
},
|
||
selectionAll() {
|
||
if (this.chkAll) {
|
||
this.chkAll = false
|
||
this.tableData.map(item => {
|
||
if (!item.is_disabled) {
|
||
item.is_selected = false
|
||
}
|
||
})
|
||
} else {
|
||
this.chkAll = true;
|
||
this.tableData.map(item => {
|
||
if (!item.is_disabled) {
|
||
item.is_selected = true
|
||
}
|
||
})
|
||
}
|
||
this.$emit('selectAll', {
|
||
is_selected: this.chkAll
|
||
})
|
||
setTimeout(() => {
|
||
this.emitSelectionChange()
|
||
}, 0)
|
||
},
|
||
emitSelectionChange() {
|
||
const itemList = this.tableData.filter(item => item.is_selected === true && item.is_disabled !== true)
|
||
let data = JSON.parse(JSON.stringify(itemList))
|
||
data.forEach(item => {
|
||
delete item.is_selected
|
||
delete item.is_disabled
|
||
})
|
||
this.$emit('selectionChange', data)
|
||
},
|
||
checkSelectionAll() {
|
||
if (!this.tableData || this.tableData.length === 0) return;
|
||
const index = this.tableData.findIndex(item => item.is_selected === false && item.is_disabled !== true)
|
||
if (~index) {
|
||
this.chkAll = false
|
||
} else {
|
||
this.chkAll = true
|
||
}
|
||
setTimeout(() => {
|
||
this.emitSelectionChange()
|
||
}, 0)
|
||
},
|
||
selectionChange(index, selected) {
|
||
const item = this.tableData[index]
|
||
if (item.is_disabled) return;
|
||
if (selected === undefined || selected === null) {
|
||
item.is_selected = !item.is_selected;
|
||
} else {
|
||
item.is_selected = selected;
|
||
}
|
||
this.$emit('select', {
|
||
is_selected: item.is_selected,
|
||
item: item,
|
||
index: index
|
||
})
|
||
this.checkSelectionAll()
|
||
},
|
||
//用于多选表格，清空用户的选择
|
||
clearSelection() {
|
||
this.chkAll = false
|
||
this.tableData.map(item => {
|
||
if (!item.is_disabled) {
|
||
item.is_selected = false
|
||
}
|
||
})
|
||
},
|
||
getRowIndex(row) {
|
||
if (!row) return -1;
|
||
const len = this.itemList.length;
|
||
let index = -1;
|
||
for (let i = 0; i < len; i++) {
|
||
const item = this.itemList[i]
|
||
if (JSON.stringify(item) === JSON.stringify(row)) {
|
||
index = i;
|
||
break;
|
||
}
|
||
}
|
||
return index;
|
||
},
|
||
toggleRowSelection(row, selected) {
|
||
const index = this.getRowIndex(row);
|
||
if (index !== -1) {
|
||
this.selectionChange(index, selected)
|
||
}
|
||
},
|
||
toggleRowDisabled(row, disabled) {
|
||
const index = this.getRowIndex(row);
|
||
if (index !== -1) {
|
||
const item = this.tableData[index]
|
||
if (disabled === undefined || disabled === null) {
|
||
item.is_disabled = !item.is_disabled;
|
||
} else {
|
||
item.is_disabled = disabled;
|
||
}
|
||
}
|
||
},
|
||
//用于多选表格，切换所有行的选中状态（全选/取消）
|
||
toggleAllSelection() {
|
||
this.selectionAll()
|
||
},
|
||
tableSort(index, sortOrder) {
|
||
if (!this.tableData || this.tableData.length === 0) return;
|
||
const item = this.hData[index]
|
||
if (item.sortable) {
|
||
// item.sortType='number/date/string'
|
||
//ascending-升序 descending-降序
|
||
let asc = false;
|
||
if (sortOrder) {
|
||
asc = sortOrder === 'ascending'
|
||
} else {
|
||
asc = !item.sort || item.sort === 'descending';
|
||
}
|
||
if (asc) {
|
||
item.sort = 'ascending'
|
||
if (item.sortType === 'number') {
|
||
this.tableData.sort((a, b) => {
|
||
return a[item.prop] - b[item.prop]
|
||
});
|
||
} else if (item.sortType === 'date') {
|
||
this.tableData.sort((a, b) => {
|
||
//日期格式字符串必须可以被转化为日期格式
|
||
return new Date(a[item.prop].replace(/\-/g, '/')).getTime() - new Date(b[item.prop]
|
||
.replace(/\-/g, '/')).getTime()
|
||
});
|
||
} else {
|
||
this.tableData.sort((a, b) => {
|
||
return a[item.prop].localeCompare(b[item.prop], 'zh-Hans-CN');
|
||
});
|
||
}
|
||
} else {
|
||
item.sort = 'descending'
|
||
if (item.sortType === 'number') {
|
||
this.tableData.sort((a, b) => {
|
||
return b[item.prop] - a[item.prop]
|
||
});
|
||
} else if (item.sortType === 'date') {
|
||
this.tableData.sort((a, b) => {
|
||
//日期格式字符串必须可以被转化为日期格式
|
||
return new Date(b[item.prop].replace(/\-/g, '/')).getTime() - new Date(a[item.prop]
|
||
.replace(/\-/g, '/')).getTime()
|
||
});
|
||
} else {
|
||
this.tableData.sort((a, b) => {
|
||
return b[item.prop].localeCompare(a[item.prop], 'zh-Hans-CN');
|
||
});
|
||
}
|
||
}
|
||
this.hData.forEach((d, idx) => {
|
||
if (index !== idx) {
|
||
d.sort = ''
|
||
}
|
||
})
|
||
this.$emit('sortChange', {
|
||
itemList: this.tableData,
|
||
sort: item.sort,
|
||
prop: item.prop
|
||
})
|
||
}
|
||
},
|
||
//重置所有排序
|
||
resetSort() {
|
||
this.hData.forEach(item => {
|
||
item.sort = ''
|
||
})
|
||
this.tableData = JSON.parse(JSON.stringify(this.initTableData))
|
||
},
|
||
//ascending-升序 descending-降序
|
||
setSort(prop, sortOrder = 'ascending') {
|
||
const index = this.hData.findIndex(item => item.prop === prop)
|
||
if (index !== -1) {
|
||
this.tableSort(index,sortOrder)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fui-table__wrap {
|
||
position: relative;
|
||
/* #ifndef APP-NVUE */
|
||
box-sizing: border-box;
|
||
margin: 0 auto;
|
||
/* #endif */
|
||
/* #ifndef MP-BAIDU */
|
||
overflow: hidden;
|
||
/* #endif */
|
||
font-size: 0;
|
||
}
|
||
|
||
.fui-table__border-top {
|
||
border-top-width: 1px;
|
||
border-top-style: solid;
|
||
}
|
||
|
||
.fui-table__border-left {
|
||
border-left-width: 1px;
|
||
border-left-style: solid;
|
||
}
|
||
|
||
.fui-table__border-right {
|
||
border-right-width: 1px;
|
||
border-right-style: solid;
|
||
}
|
||
|
||
.fui-table__border-bottom {
|
||
border-bottom-width: 1px;
|
||
border-bottom-style: solid;
|
||
}
|
||
|
||
.fui-table--tr {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
}
|
||
|
||
.fui-table--td {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
flex-shrink: 0;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding-left: 16rpx;
|
||
padding-right: 16rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.fui-table__sort-icon {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 0;
|
||
bottom: 0;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.fui-table__td-sk {
|
||
position: absolute;
|
||
left: -1px;
|
||
width: 1px;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.fui-table__td-wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.fui-table--td-text {
|
||
font-weight: 400;
|
||
}
|
||
|
||
.fui-table--td-img {
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-table--btn {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
/* #endif */
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* #ifdef H5 */
|
||
cursor: pointer;
|
||
/* #endif */
|
||
text-align: center;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.fui-table--btn:active {
|
||
opacity: .5;
|
||
}
|
||
|
||
.fui-td__btn-ml {
|
||
margin-left: 24rpx;
|
||
}
|
||
|
||
.fui-table--header-fixed {
|
||
position: sticky;
|
||
top: 0;
|
||
/* #ifndef APP-NVUE */
|
||
z-index: 12;
|
||
/* #endif */
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.fui-table--col-fixed {
|
||
position: sticky;
|
||
/* #ifndef APP-NVUE */
|
||
z-index: 2;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-table__center {
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.fui-table__right {
|
||
justify-content: flex-end;
|
||
text-align: right;
|
||
}
|
||
|
||
.fui-text__center {
|
||
text-align: center;
|
||
}
|
||
|
||
.fui-text__right {
|
||
text-align: right;
|
||
}
|
||
|
||
.fui-td__ellipsis {
|
||
/* #ifndef APP-NVUE */
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
lines: 1;
|
||
/* #endif */
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-td__wrap {
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-table__scroll-view {
|
||
position: relative;
|
||
}
|
||
|
||
/* #ifdef APP-NVUE */
|
||
.fui-table__flex-row {
|
||
flex-direction: row;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
/* #ifdef MP-BAIDU */
|
||
.fui-table--inner {
|
||
display: inline-block;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-table__checkbox {
|
||
font-size: 0;
|
||
color: rgba(0, 0, 0, 0);
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
/* #ifndef APP-NVUE */
|
||
display: inline-flex;
|
||
box-sizing: border-box;
|
||
vertical-align: top;
|
||
flex-shrink: 0;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
position: relative;
|
||
border-radius: 8rpx;
|
||
/* #ifdef H5 */
|
||
cursor: pointer;
|
||
/* #endif */
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-table__checkbox-color {
|
||
background: var(--fui-color-primary, #465CFF) !important;
|
||
border-color: var(--fui-color-primary, #465CFF) !important;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-table__disabled {
|
||
opacity: .5;
|
||
/* #ifdef H5 */
|
||
cursor: not-allowed;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-table__checkmark {
|
||
width: 18rpx;
|
||
height: 36rpx;
|
||
border-bottom-style: solid;
|
||
border-bottom-width: 3px;
|
||
border-bottom-color: #FFFFFF;
|
||
border-right-style: solid;
|
||
border-right-width: 3px;
|
||
border-right-color: #FFFFFF;
|
||
/* #ifndef APP-NVUE */
|
||
box-sizing: border-box;
|
||
transform: rotate(45deg) scale(0.5) translateZ(0);
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
transform: rotate(45deg) scale(0.5);
|
||
/* #endif */
|
||
transform-origin: 54% 48%;
|
||
}
|
||
</style> |