可编辑的el-table表格

可编辑的el-table表格，可以结合input输入框，select选择框，tree树形结构等。

实现序列递增，删除的序列不会再出现。

效果图

html部分代码

<div>
<el-table :data="tableData" border :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"><!--递增序列，删除的序列不会再次出现--><el-table-column label="序列" prop="index"></el-table-column><!--多选框，可以替换任何输入框等--><el-table-column label="岗位" prop="data"><template slot-scope="scope"><el-select v-model="scope.row.startFrameType" placeholder="请选择岗位" multiple><el-option v-for="(item,index) in options" :key="index" :label="item" :value="item"></el-option></el-select></template></el-table-column><!--删除操作--><el-table-column fixed="right" label="操作"><template slot-scope="scope"><el-button type="text" size="small" @click="delValue(scope.$index)">删除</el-button></template></el-table-column>
</el-table>
<button type="button" class="btn add" @click="addValue"><span>添加</span></button>
</div>

js部分代码

data() {return {tableData: [],//表格数据options: ['员工', '主管', '全部'],//筛选数据}},
computed: {//序列处理，递增，删除的序列数，不会再出现index() {let index = this.tableData && this.tableData.length && this.tableData[this.tableData.length - 1].indexreturn ++index}},
methods: {//    添加addValue() {this.tableData.push({index: this.index,startFrameType: [],})},//    删除delValue(i) {this.$confirm('是否删除序列?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.tableData.splice(i, 1)}).catch(() => {this.$message({type: 'info',message: '已取消'});});},}

可编辑的el-table表格相关推荐

vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
python测试开发django-173.bootstrap实现table表格行内编辑
前言网上看了很多基于bootstrap的table表格行内编辑,需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件,写的很复杂. 我想实现的 ...
vue极简代码实现自定义可编辑行及操作按钮的Table表格组件（含源码及演示视频）
效果图如下: 涉及到技术点包括: 父组件给子组件传值props.动态赋值 refs 对DOM进行操作,slot具名插槽的使用,插槽通过slot-scope给父组件传值父组件代码: <templ ...
使用element UI时，table表格插入input输入框后里面的内容无法编辑问题
其实此处打的问题是内容已经被修改了,但是table表格因为没有更新数据,所以看起来像是没有修改成功此处可以添加给对应的input标签添加@input="onExchange(scope.$ ...
element-plus table表格换行变色以及部分el自带样式的修改
element-plus table表格换行变色次处为表头颜色修改 :header-cell-style="{ background: '#0B3357' }" 在el-tabl ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
layui table 添加img_layui中table表格的基本操作
最近抽空总结了下layui中table表格的相关配置,解释的比较全面,可供大家参考,页面效果如下: table表格.png table表格html部分: 新增备注编辑 table表格渲染js (包 ...
antd4 table里面表单赋值_vue的组件化——table表格的封装
什么是组件化--组件化是vue.js中的重要思想之一,也是vue的一个强大功能.它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用:任何的应用都可以被抽象成一个组件进行复用. ...
layui中table监听单元格_layui table表格监听头删除不请求后台
表格js function getTable() { var table = layui.table //表格 var username=$("#username").val(); ...
Element-UI中关于table表格的那些骚操作
最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是 ...

可编辑的el-table表格

可编辑的el-table表格相关推荐

最新文章

热门文章