table的控制

1.绘制表格
<script   language=javascript>
 function   show(){
 var   a=new   Array('1','2','3');
 var   b=new   Array('a','b','c') ;
 var   objTable=document.createElement("table")
 var   objTBody=document.createElement("tbody")
 for(var   i=0;i <a.length;i++)
 {
 var   objTr=document.createElement("tr")
 
 var   objTd=document.createElement("td")
 objTd.innerHTML=a[i]
 objTr.appendChild(objTd);
 var   objTd=document.createElement("td")
 objTd.innerHTML=b[i]
 objTr.appendChild(objTd);
 objTBody.appendChild(objTr)
 }
 objTable.appendChild(objTBody)
 objTable.id="table6";
 objTable.border="1";
 objTable.style.width="555";
 objTable.setAttribute("cellSpacing","1")
 document.body.appendChild(objTable)
}
</script>
<body   onload="show();">  
</body>


2.绘制表格的js
function $$(tag)
{
   return document.createElement(tag);
}

//绘制表格
function   show(data){
 
 var tb = document.all["spyj"].tBodies[0];
 for (var i = 0;i < data.length; i++) {
       
        var tr1 = createTR("审批人",data[i].auditUserName,"审批人所在部门",data[i].auditOrganName);
   var tr2 = createTR("审批日期",data[i].auditTime,"审批结果",data[i].result);
  var tr3 = createContentTR("审批意见",data[i].ideaContext,"");
  var tr4 = createContentTR("","","all");  
  tb.appendChild(tr1);
  tb.appendChild(tr2);
  tb.appendChild(tr3);
  tb.appendChild(tr4);
 }
 
 
}
   
    function createTR(k1,v1,k2,v2)
    {
        var tr = $$("tr");
  var td1 = $$("td");
  td1.innerText=k1;
 
  var td2 = $$("td");
  td2.innerHTML =v1;
  td2.className ="four-content";

  var td3 = $$("td");
  td3.innerHTML =k2;

  var td4 = $$("td");
  td4.innerHTML =v2;
  td4.className ="four-content";

  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
  tr.appendChild(td4);
  return tr;
    }
   
    function createContentTR(k1,v1,action)
    {
        if(action=="all")
        {
          var tr = $$("tr");
    var td1 = $$("td");
    td1.colSpan="4";
    td1.style.height="10px";
    tr.appendChild(td1);
     return tr;
        }else
        {
         var tr = $$("tr");
  var td1 = $$("td");
  td1.innerText=k1;

  var td2 = $$("td");
  td2.innerHTML =v1;
  td2.className ="four-content";
  td2.colSpan="3";
  td2.style.height="100px";
  tr.appendChild(td1);
  tr.appendChild(td2);
  return tr;
        }
    }

2.绘制表格的页面代码:
 <table class="table-form" id="spyj">
                   
 </table>

在使用 `el-table` 时,控制展开行的实现方法主要依赖于 `expand-row-keys` 属性,该属性用于绑定一个数组,数组中包含需要展开的行的唯一标识(通常为 `row-key` 所指定的字段)[^2]。通过操作这个数组,可以实现对特定行展开或闭合的控制。 ### 控制展开行的实现方法 #### 1. 设置 `row-key` 和 `expand-row-keys` 首先,需要在 `el-table` 组件上设置 `row-key` 属性,指定数据中唯一标识每一行的字段,例如 `id`。同时,使用 `expand-row-keys` 绑定一个数组,该数组中包含当前需要展开的行的 `row-key` 值。 ```html <el-table :data="tableData" row-key="id" :expand-row-keys="expandedRowKeys" @expand-change="handleExpandChange" > <!-- 展开行列 --> <el-table-column type="expand"> <template #default="{ row }"> <!-- 展开内容 --> </template> </el-table-column> <!-- 其他列 --> </el-table> ``` #### 2. 动态修改 `expand-row-keys` 通过动态修改 `expand-row-keys` 数组,可以控制哪些行需要展开。例如,当点击某个按钮时,可以将某一行的 `id` 添加到 `expandedRowKeys` 数组中,从而实现展开;反之,将其从数组中移除即可实现闭合。 ```javascript const expandedRowKeys = ref([]); function toggleRowExpansion(row) { const index = expandedRowKeys.value.indexOf(row.id); if (index > -1) { expandedRowKeys.value.splice(index, 1); // 闭合 } else { expandedRowKeys.value.push(row.id); // 展开 } } ``` #### 3. 处理新增行的展开 对于新增的行,如果这些行没有唯一标识(如 `id`),可以通过临时生成唯一标识来处理。例如,在新增行时,可以为其生成一个临时的唯一 `id`,并将其添加到 `expandedRowKeys` 数组中,从而实现展开。 ```javascript function addNewRow() { const newRow = { id: generateUniqueId(), // 生成唯一ID // 其他字段 }; tableData.value.push(newRow); expandedRowKeys.value.push(newRow.id); } ``` #### 4. 刷新表格以触发重新渲染 在某些情况下,可能需要通过刷新表格来触发重新渲染,以确保展开状态的更新。可以通过一个变量(如 `tableKey`)来控制表格的重新渲染,每次修改 `tableKey` 的值即可实现刷新。 ```html <el-table :key="tableKey" :data="tableData" row-key="id" :expand-row-keys="expandedRowKeys" > <!-- 表格列 --> </el-table> ``` ```javascript const tableKey = ref(0); function refreshTable() { tableKey.value++; } ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值