你害怕大雨吗
你害怕大雨吗
  • 发布:2024-02-28 16:26
  • 更新:2024-07-21 12:24
  • 阅读:787

#插件讨论# 【 uni-table 表格 宽度不生效问题 】

分类:uni-app
关联插件: uni-table 表格

看了大概代码,知道了因为宽度计算的原因造成有时候我们给宽度属性不生效问题,我这边已经解决了有需要的小伙伴可以联系

2024-02-28 16:26 负责人:无 分享
已邀请:
HRK_01

HRK_01

你的uni-table版本是最新版本的?最新版本的不会复现该问题哦

  • 3***@qq.com

    就是最新的,如果uni-td的内容比较长的话 比如15,18位的订单号 uni-th给的宽度就不会生效

    2024-03-12 14:11

LeBron666666

LeBron666666

你好,请问宽度不生效问题怎么解决呢?

喜欢技术的前端

喜欢技术的前端 - QQ---445849201

设置 width="150" 就可以,试试

<template>  
    <view>  
        <view class="uni-container">  
            <uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"  
                @selection-change="selectionChange">  
                <uni-tr>  
                    <uni-th width="80" align="center">日期</uni-th>  
                    <uni-th width="150" align="center">订单</uni-th>  
                    <uni-th align="center">地址</uni-th>  
                    <uni-th width="204" align="center">设置</uni-th>  
                </uni-tr>  
                <uni-tr v-for="(item, index) in tableData" :key="index">  
                    <uni-td>{{ item.date }}</uni-td>  
                    <uni-td>  
                        <view class="name">{{ item.name }}</view>  
                    </uni-td>  
                    <uni-td align="center">{{ item.address }}</uni-td>  
                    <uni-td>  
                        <view class="uni-group">  
                            <button class="uni-button" size="mini" type="primary">修改</button>  
                            <button class="uni-button" size="mini" type="warn">删除</button>  
                        </view>  
                    </uni-td>  
                </uni-tr>  
            </uni-table>  
            <view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"  
                    :total="total" @change="change" /></view>  
        </view>  
    </view>  
</template>  
<script>  
    import tableData from './tableData.js'  
    export default {  
        data() {  
            return {  
                searchVal: '',  
                tableData: [{  
                    "date": "2020-09-01",  
                    "name": "jd1212542122356541246564564644566456465656565633232323232323232",  
                    "address": "上海市普陀区金沙江路 1518 弄"  
                }, {  
                    "date": "2020-09-02",  
                    "name": "Dcloud2",  
                    "address": "上海市普陀区金沙江路 1517 弄"  
                }, {  
                    "date": "2020-09-03",  
                    "name": "Dcloud3",  
                    "address": "上海市普陀区金沙江路 1519 弄"  
                }],  
                // 每页数据量  
                pageSize: 10,  
                // 当前页  
                pageCurrent: 1,  
                // 数据总量  
                total: 0,  
                loading: false  
            }  
        },  
        onLoad() {  
            this.selectedIndexs = []  
        },  
        methods: {  
            // 多选处理  
            selectedItems() {  
                return this.selectedIndexs.map(i => this.tableData[i])  
            },  
            // 多选  
            selectionChange(e) {  
                console.log(e.detail.index)  
                this.selectedIndexs = e.detail.index  
            },  
            //批量删除  
            delTable() {  
                console.log(this.selectedItems())  
            },  
            // 分页触发  
            change(e) {  
                this.$refs.table.clearSelection()  
                this.selectedIndexs.length = 0  
                this.getData(e.current)  
            },  
            // 搜索  
            search() {  
                this.getData(1, this.searchVal)  
            }  
        }  
    }  
</script>  
<style>  
    /* #ifndef H5 */  
    /* page {  
    padding-top: 85px;  
} */  
    /* #endif */  
    .uni-group {  
        display: flex;  
        align-items: center;  
    }  
</style>
s***@qq.com

s***@qq.com

请问怎么修改表格设置的最小宽度呢

要回复问题请先登录注册