需求：需要在移动端添加表格，并且实现多选、全选、根据状态默认禁用某一行数据，点击单行弹出选择器让用户选择，固定表头。有的需求uni-table没有，所以需要更改源代码实现
1.效果
2.多选
uni-table上有多选的方法type="selection",用户选中后会触发@selection-change="selectionChange"
html
<uni-table ref="table" type="selection" rowKey="id" @selection-change="selectionChange" border stripe>selectionChange得到的默认值不是像el-table那样直接获取行数据，获取的是下标，所以需要再转换一下
javascript
selectionChange(e) {
console.log(e,'-----');
let arrList = [] // 选择的行数据
let selectedIndexs = [] // 选择的下标数组
selectedIndexs = e.detail.index
// 将数组中的值，作为table表格数组的下标来获取对应的当前行数据
selectedIndexs.map(i => {
arrList.push(this.tableData[i])
})
console.log(arrList, '当前行数据');
},3.动态禁用（改源码）
官网上没有标有disabled，但是看了源码确实是写了，可以直接用，但是注意，如果要操作表格，增删改查的话，这个disabled不会根据状态的改变动态更新，已解决
html
<uni-tr :disabled="disabledFlag(item)" v-for="(item, index) in tableData" :key="index"></uni-table>在这里我设置了状态23为true，默认进来23就是禁用状态
javascript
computed: {
// 计算每行禁用状态
disabledFlag() {
return (item) => item.status == 2 || item.status == 3?true:false;
}
},
但是在删除后状态依然没有改变，但是监听disabledFlag发现数据已经改变了，所以需要在源码中添加监听操作，在下载的modules包中找到table-checkbox.vue文件
在watch中监听disabled并且改值，以下代码直接拷贝即可，isDisabled 就是源码状态改变的属性，这样就可以动态更新了
javascript
watch:{
//监听 disabled 属性的变化 改源码
disabled(newVal, oldVal) {
if(typeof this.disabled === 'boolean'){
this.isDisabled = newVal
}else{
this.isDisabled = true
}
},
},4.点击单行弹出选择器（解决点击无效问题）
点击单行弹出选择器，我在网上找的五花八门的，但是都不符合我要的需求，单行不包含复选框，以下是没有复选框选择后点击当行弹窗选择器，@click.native="rowClick(item)"
html
<uni-tr :disabled="disabledFlag(item)" @click.native="rowClick(item)" v-for="(item, index) in tableData" :key="index">
<uni-td>
<view style="width:50px;">{{item.realname}}</view>
</uni-td></uni-tr>如果你已经添加复选框了，那么不能这样写，不然点复选框也会弹出选择器，写法如下，在tr和td之间套一层view即可实现
html
<uni-tr :disabled="disabledFlag(item)" v-for="(item, index) in tableData" :key="index">
<view @click="rowClick(item)">
<uni-td>
<view style="width:50px;">{{item.realname}}</view>
</uni-td>
</view>
</uni-tr>5.完整代码（包含固定表头功能）
javascript
<template>
<view class="uni-container">
<uni-table ref="table" type="selection" rowKey="id" @selection-change="selectionChange" border stripe
emptyText="暂无更多数据">
<view class="tableHead">
<uni-tr>
<uni-th align="center">
<view style="width:50px;">姓名</view>
</uni-th>
<uni-th align="center">
<view style="width:50px;">部门</view>
</uni-th>
<uni-th align="center">
<view style="width:50px;">状态</view>
</uni-th>
</uni-tr>
</view>
<view class="tableBody">
<uni-tr :disabled="disabledFlag(item)" v-for="(item, index) in tableData" :key="index">
<view @click="rowClick(item)">
<uni-td>
<view style="width:50px;">{{item.realname}}</view>
</uni-td>
<uni-td>
<view style="width:50px;">{{item.name}}</view>
</uni-td>
<uni-td>
<view style="width:50px;">{{item.status || ''}}</view>
</uni-td>
</view>
</uni-tr>
</view>
</uni-table>
<u-picker :show="show" @confirm="confirm" :columns="columns"></u-picker>
</view>
</template>
<script>
export default {
data() {
return {
loading: false,
tableData: [{
date: '22',
realname: '张三',
name: '研发',
status: 1
}, {
date: '223',
realname: '李四',
name: '研发',
status: 2
},
{
date: '223233',
realname: '王五',
name: '研发',
status: 3
},
{
date: '22324',
realname: '37283',
name: '研发',
status: 4
}
],
show: false,
columns: [
['删除', '编辑']
],
}
},
mounted() {
// const result = [];
// for (let i = 0; i < 100; i++) {
// result.push({
// date: new Date().toISOString(),
// realname: '张三'+ i,
// name: '研发',
// status: i
// })
// }
// this.tableData = result;
},
computed: {
// 计算每行禁用状态
disabledFlag() {
return (item) => item.status == 2 || item.status == 3 ? true : false;
}
},
methods: {
selectionChange(e) {
let arrList = [] // 选择的行数据
let selectedIndexs = [] // 选择的下标数组
selectedIndexs = e.detail.index
// 将数组中的值，作为table表格数组的下标来获取对应的当前行数据
selectedIndexs.map(i => {
arrList.push(this.tableData[i])
})
},
rowClick(item) {
this.show = true;
console.log(item);
},
// 回调参数为包含columnIndex、value、values
confirm(e) {
console.log('confirm', e.value[0])
if (e.value[0] == '删除') {
this.tableData = this.tableData.splice(1,3)
console.log(this.tableData,'-------');
}
this.show = false
}
}
}
</script>
<style lang="scss">
.uni-container {
height: 500rpx;
margin-top: 50rpx;
position: relative;
}
/* //表头固定样式 */
::v-deep .tableHead {
font-weight: bold;
color: #333333;
background: #f8f8f8;
z-index: 20;
position: absolute;
top: 0rpx;
}
::v-deep .tableBody {
height: 500px;
overflow: scroll;
margin-top: 44px;
background-color: #fff;
}
</style>文章到此结束，希望对你有所帮助