element-ui的table表中数据可编辑
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
先看效果
html结构代码
<el-table :data="tableData" highlight-current-row border :height='tableHeight'>
<el-table-column prop="info.url" label="通道名称" align="center" class="compileNameFather" width="230">
<template slot-scope="scope">
<div class='headerFirst'>
{{scope.row.info.url}}<i class="el-icon-edit-outline eidtIcon" @click="tableDbEdit(scope.$index)"></i>
</div>
</template>
</el-table-column>
<el-table-column prop="number" label="实时人数" align="center"></el-table-column>
<el-table-column prop="lastAnalyze" label="最后分析时间" align="center" :formatter="formatTime"></el-table-column>
<el-table-column label="人员白名单" align="center">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
<span v-if="scope.row.info.url">在线</span>
<span v-else class="colorStatus">预备</span>
</template>
</el-table-column>
</el-table>
vue中table是常用的,很多时候为了方便偷懒用table,但可能朋友们就会遇到我这种情况(可编辑),
实现的方法有:
- 原生方法
- 组件切换的方法
我个人选择第一种简单low的方法(动态生成el-input、button)。
js代码
基本上就是动态生成赋值、class、style等效果,改改就可以用。
tableDbEdit(index) { //index为索引号
var cellabc = document.getElementsByClassName('headerFirst')[index];
cellabc.innerHTML = "";
let cellInput = document.createElement("el-input");
let cellInputSon = document.createElement("input");
let cellBut = document.createElement("button");
let ibtu = document.createElement("i");
cellInputSon.value = this.tableData[index].info.url;
cellabc.setAttribute("class","cellBoxdev");
ibtu.setAttribute("class","el-icon-check");
cellInputSon.setAttribute("class","el-input__inner compileName");
cellBut.setAttribute("class","el-button el-button--warning el-button--mini");
cellBut.innerText = '成功';
cellInput.style.width = "100%";
ibtu.style.marginLeft = "3px";
cellInputSon.style.width = "60%";
cellInputSon.style.padding = "0 5px 0 0";
cellInputSon.style.border = "1px solid transparent";
this.clickButSty = true;
cellInput.appendChild(cellInputSon);
cellabc.appendChild(cellInput);
cellInput.appendChild(cellBut);
cellBut.appendChild(ibtu);
cellBut.onclick = ()=>{ //成功按钮事件
cellabc.removeChild(cellInput);
this.tableData[index].info.url = cellInputSon.value;
cellabc.innerHTML = this.tableData[index].info.url;
let ibtuIcon = document.createElement("i");
ibtuIcon.setAttribute("class","el-icon-edit-outline eidtIcon");
cellabc.appendChild(ibtuIcon);
cellabc.setAttribute("class","headerFirst");
ibtuIcon.onclick = ()=>{
this.tableDbEdit(index);
}
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)