JavaScript Table行填充

  使用JS脚本操作Table元素,在不同浏览器中操作方法不尽相同。当新建一行之后,IE中可以使用单元格操作来完成单元格的添加,而在FireFox中无法正确通过单元格来操作,而只能使用<td></td>来实现。

  因此,在编写填充函数时,要注意检测浏览器并分别处理。


  JS代码如下:

        //往表格某位置插入行
        function insertTableRow(tObj, rowIdx, detail){
            if(tObj == null || attendDetail == null) return false;
            if(rowIdx < 0 || rowIdx > tObj.rows.length) rowIdx = tObj.rows.length;
            var newRow = tObj.insertRow(rowIdx);
            newRow.id = detail["id"]; //可选设置
            var btype = detectBrower();
            if(btype != "IE"){
                var rowHTML = "<td>" + detail["code"] + "</td><td>" + detail["name"] + "</td>";
                newRow.innerHTML = rowHTML;
            }else{
                //IE
                var c = newRow.insertCell();
                c.innerHTML = detail["code"];
                c = newRow.insertCell();
                c.innerHTML = detail["name"];
            }
        }


  其中,tObj为Table对象,rowIdx为要插入的行位置(从0开始编号),detail为填充对象(具体内容及字段自定)。


  函数detectBrower定义如下:

function detectBrower()
{
    var sUserAgent = navigator.userAgent;
    var isOpera = sUserAgent.indexOf("Opera") > -1;
    if(isOpera) return "Opera";
    var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1 || sUserAgent.indexOf("AppleWebKit") > -1;
    var isSafari = sUserAgent.indexOf("AppleWebKit") > -1 && isKHTML;
    var isKonq = sUserAgent.indexOf("Konqueror") > -1 && isKHTML;
    if(isSafari) return "Safari";
    if(isKonq) return "Konqueror";
    var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera;
    if(isIE) return "IE";
    var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isKHTML;
    if(isMoz) return "Mozilla";
    return "None";
}


### 实现 `el-table` 组件的横向填充功能 在 Element UI 的 `el-table` 中,可以通过设置表格列宽度以及调整容器样式来实现横向填充的效果。具体来说,可以利用 CSS 和 Vue 插槽机制完成这一需求。 以下是基于提供的引用内容和专业知识的具体解决方案: #### 方法一:使用固定宽度并配合弹性布局 通过为每一列指定固定的宽度,并在外层容器上应用弹性布局,可以让表格自动适应父级容器的宽度变化。 ```html <template> <div style="display: flex; width: 100%;"> <el-table :data="tableData" style="flex-grow: 1;"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址" min-width="200"> <!-- 使用作用域插槽自定义单元格 --> <template slot-scope="{ row }">{{ row.address }}</template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: "2023-09-01", name: "张三", address: "北京市朝阳区" }, { date: "2023-09-02", name: "李四", address: "上海市浦东新区" } ] }; } }; </script> ``` 上述代码中,外层容器设置了 `display: flex` 并赋予其全宽属性[^1]。同时,在最后一列中引入了作用域插槽的功能[^2],以便更灵活地控制显示逻辑。 #### 方法二:动态计算剩余空间分配给特定列 如果希望某些列占据更多可用空间,则可通过 JavaScript 动态测量其他列占用的空间总和,并将其余部分分配至目标列。 ```javascript mounted() { this.$nextTick(() => { const totalWidth = document.querySelector('.el-table').offsetWidth; let usedWidth = Array.from( document.querySelectorAll('.el-table .cell') ).reduce((sum, cell) => sum + parseInt(window.getComputedStyle(cell).width), 0); // 假设最后一列为可扩展列 const lastColumnEl = document.querySelector('.el-table th:last-child'); if (lastColumnEl && typeof lastColumnEl.style.width === 'string') { lastColumnEl.style.width = `${totalWidth - usedWidth}px`; } }); } ``` 此脚本片段会在组件挂载完成后执一次重新评估操作,从而确保即使窗口大小发生变化也能保持良好的视觉效果。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值