uniapp uni-table实现多选，点击单行弹出选择器，默认禁用某行

需求：需要在移动端添加表格，并且实现多选、全选、根据状态默认禁用某一行数据，点击单行弹出选择器让用户选择，固定表头。有的需求uni-table没有，所以需要更改源代码实现

1.效果

2.多选

uni-table上有多选的方法type="selection",用户选中后会触发@selection-change="selectionChange"

<uni-table ref="table" type="selection" rowKey="id" @selection-change="selectionChange" border stripe>

selectionChange得到的默认值不是像el-table那样直接获取行数据，获取的是下标，所以需要再转换一下

		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不会根据状态的改变动态更新，已解决

<uni-tr :disabled="disabledFlag(item)" v-for="(item, index) in tableData" :key="index"></uni-table>

在这里我设置了状态23为true，默认进来23就是禁用状态

		computed: {
		   // 计算每行禁用状态
		   disabledFlag() {
		     return (item) => item.status == 2 || item.status == 3?true:false;
		   }
		 },

但是在删除后状态依然没有改变，但是监听disabledFlag发现数据已经改变了，所以需要在源码中添加监听操作，在下载的modules包中找到table-checkbox.vue文件

在watch中监听disabled并且改值，以下代码直接拷贝即可，isDisabled 就是源码状态改变的属性，这样就可以动态更新了

		watch:{

			//监听 disabled 属性的变化 改源码
			disabled(newVal, oldVal) {
				if(typeof this.disabled === 'boolean'){
					this.isDisabled = newVal
				}else{
					this.isDisabled = true
				}
			},
		},

4.点击单行弹出选择器（解决点击无效问题）

点击单行弹出选择器，我在网上找的五花八门的，但是都不符合我要的需求，单行不包含复选框，以下是没有复选框选择后点击当行弹窗选择器，@click.native="rowClick(item)"

<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即可实现

	<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.完整代码（包含固定表头功能）

<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>

文章到此结束，希望对你有所帮助