<template>
<view>
<uni-table ref="table" :loading="loading" border stripe :type="type" emptyText="暂无更多数据"
@selection-change="selectionChange">
<uni-tr>
<!-- single单选 -->
<uni-th v-if="type =='single'" width="40" style="color: #fff;margin: auto;" align="center" />
<uni-th v-for="(item, i) in columns" :key="i" :width="item.width"
:align="item.align">{{item.title}}</uni-th>
</uni-tr>
<uni-tr v-for="(item, i) in tableData" :key="i">
<!-- single单选 -->
<uni-td v-if="type =='single'" align="center">
<view v-if="selectedIndex === i" @click="saveCombox(i)" :style="{
background: '#007aff',
width: '28rpx',
height: '28rpx',
position: 'relative',
border: '1px solid #d1d1d1',
margin: 'auto'
}">
<uni-icons color="#fff"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
v-if="selectedIndex === i" type="checkmarkempty" size="14" />
</view>
<view v-else @click="saveCombox(i)" :style="{
background: 'none',
width: '28rpx',
height: '28rpx',
position: 'relative',
border: '1px solid #d1d1d1',
margin: 'auto'
}">
</view>
</uni-td>
<uni-td v-for="(temp,i) in columns" :key="i" :style="{textAlign: temp.align}">
<template v-if="temp.slot">
<slot :name="temp.slot" :data="item"></slot>
</template>
<template v-else>
<text>{{ item[temp.dataIndex] }}</text>
</template>
</uni-td>
</uni-tr>
</uni-table>
</view>
</template>
export default {
props: {
type: {
type: String,
default: function() {
return '' //selection 多选 single 单选
}
},
columns: {
type: Array,
default: function() {
return [{
title: '姓名',
align: 'center',
width: 168,
dataIndex: 'name',
// slot 插槽
}, {
title: '年龄',
align: 'center',
width: 168,
dataIndex: 'age'
}, ]
}
},
tableData: {
type: Array,
default: function() {
return [{
"name": "孟浩然",
"age": "18"
}, {
"name": "王昌龄",
"age": "22"
}]
}
}
},
data() {
return {
loading: false,
selectedIndex: '',
}
},
methods: {
// 多选
selectionChange(e) {
console.log(e)
},
// 单选
saveCombox(e) {
this.selectedIndex = e
console.log(this.tableData[e])
this.$emit('change', this.tableData[e])
}
}
}
<style scoped lang="scss">
/deep/ .uni-table-td {
padding: 4px;
font-size: 13px;
}
/deep/ .uni-table-th {
background: #1989fa;
color: #fff;
font-size: 14px !important;
font-weight: bold;
}
/deep/ .uni-table-tr:nth-child(1)>.checkbox {
background: #1989fa;
}
</style>
上面的只能用于H5端,
下面的可以在微信小程序和H5编译,但是由于小程序不支持动态插槽,就不是用的插槽方案
子组件
<template>
<view>
<uni-table ref="table" :loading="loading" border stripe :type="type" emptyText="暂无更多数据"
@selection-change="selectionChange">
<uni-tr>
<!-- single单选 -->
<uni-th v-if="type =='single'" width="40" style="color: #fff;margin: auto;" align="center" />
<uni-th v-for="(item, i) in columns" :key="item.dataIndex" :width="item.width"
:align="item.align">{{item.title}}</uni-th>
</uni-tr>
<uni-tr v-for="(item, i) in tableData" :key="i">
<!-- single单选 -->
<uni-td v-if="type =='single'" align="center">
<view v-if="selectedIndex === i" @click="saveCombox(i)" :style="{
background: '#007aff',
width: '28rpx',
height: '28rpx',
position: 'relative',
border: '1px solid #d1d1d1',
margin: 'auto'
}">
<uni-icons color="#fff"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
v-if="selectedIndex === i" type="checkmarkempty" size="14" />
</view>
<view v-else @click="saveCombox(i)" :style="{
background: 'none',
width: '28rpx',
height: '28rpx',
position: 'relative',
border: '1px solid #d1d1d1',
margin: 'auto'
}">
</view>
</uni-td>
<uni-td v-for="(temp,is) in columns" :key="is" :style="{textAlign: temp.align}">
<!--自定义插槽 微信不可用 以json 格式来编译使用 -->
<template v-if="temp.slot">
<text v-for="(items,isi) in temp.renders " :key="isi" @click="detailsSave(items.function,i)"
:style="[{color:items.color || ''}]">{{ items.name }}</text>
</template>
<template v-else-if="temp.filters">
<text :style="[{color:temp.textColor[item[temp.dataIndex]] || ''}]">
{{temp.filters[item[temp.dataIndex]] }}
</text>
</template>
<template v-else>
<text>{{ item[temp.dataIndex] }}</text>
</template>
<!-- 自定义动态插槽名 仅支持 H5 H5可以插槽 -->
<!-- #ifdef H5 -->
<!-- <template v-if="temp.slot">
<slot :name="`tab-${temp.slot}`" :data="item" />
</template>
<template v-else-if="temp.filters">
<text :style="{color:temp.textColor[item[temp.dataIndex]] || ''}">
{{temp.filters[item[temp.dataIndex]] }}
</text>
</template>
<template v-else>
<text>{{ item[temp.dataIndex] }}</text>
</template> -->
<!-- #endif -->
</uni-td>
</uni-tr>
</uni-table>
</view>
</template>
<script>
export default {
props: {
type: {
type: String,
default: function() {
return '' //selection 多选 single 单选
}
},
columns: {
type: Array
},
tableData: {
type: Array
}
},
options: {
dynamicSlots: true, // 启用动态 slot
multipleSlots: true, // 启用动态 slot
},
data() {
return {
loading: false,
selectedIndex: '',
}
},
methods: {
// 多选
selectionChange(e) {
console.log(e)
},
// 单选
saveCombox(e) {
this.selectedIndex = e
console.log(this.tableData[e])
this.$emit('change', this.tableData[e])
},
detailsSave(e, temp) {
console.log(temp)
console.log(e, this.tableData[temp])
this.$emit(e, this.tableData[temp])
}
}
}
</script>
父组件 引用
<Jtable :columns="columns" :tableData="tableData" type='' @handleDetail="handleDetail">
handleDetail//方法名 你自己命名就可以
handleDetail(e){ <!-- e 就可以拿到当前点击的 列的整条数据-->}
{
title: '错误信息',
width: 44,
align: 'center',
slot: 'action',
renders: [{
name: '查看',
color: '#1989FA',
function: 'handleDetail'
}]
}
//表头
columns: [{
title: '检测类型名称',
width: 58,
align: 'center',
dataIndex: 'name01'
},
{
title: '检测结果',
width: 45,
align: 'center',
dataIndex: 'name04',
filters: {
0: '不通过',
1: '通过'
},
textColor: {
0: '#24A88F',
1: '#E83544'
}
}, {
title: '错误信息',
width: 44,
align: 'center',
slot: 'action',
renders: [{
name: '查看',
color: '#1989FA',
function: 'handleDetail'
}]
}
],
//数据
tableData: [{
"id": 0,
"name01": "生产班次结单检测",
"name04": 1,
},
{
"id": 1,
"name01": "生产班次结单检测",
"name04": 0
}
]