重庆建设工程信息网官网入口网页_新手怎么开传媒公司_宁德seo培训_百度推广天天打骚扰电话

需求：需要在移动端添加表格，并且实现多选、全选、根据状态默认禁用某一行数据，点击单行弹出选择器让用户选择，固定表头。有的需求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 stripeemptyText="暂无更多数据"><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、valuesconfirm(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>

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