vue table表格自定义

刚接了一个新需求，自定义表格的行和列，没有想到好的实现方法，就用原生table写了一个，直接上代码：

先给大家展示一下效果：

下面直接上代码：

<el-button style="margin-left: 10px; float: right;" size="small" @click="refresh">重置</el-button>
<table><template v-for="(item,index) in tableProDate"><tr><template v-for="inx in cellLength"><td><el-input style="width:100px;" v-model="item['tagCell'+''+inx]" size="small" :placeholder="item.placeholder" clearable> </el-input></td></template><el-button v-if="index == 0" style="border-style: dashed;margin-top: 10px;" size="small"  @click="addCell()">添加列</el-button><el-button v-else style="border-style: dashed;margin-top: 10px;" size="small" @click="delRow(index)">删除行</el-button></tr></template><el-button style="border-style: dashed;margin-top: 10px" size="small" @click="addRow()">添加行</el-button></table>

定义一个 tableProDate 数组，这个数组为整个表格的数据，tagCellObj为一行数据的对象，通过Object.keys(this.tagCellObj).length来获取对象的长度来进行列的添加操作。

export default {name: "performance",mixins: [dialogsMixins,inquiryMixins],data () {return {tagCellObj:{ tagCell1:'',},tableProDate:[{tagCell1:'',placeholder:'表头内容'},],cellLength:1,}},methods: {refresh(){  //重置this.cellLength = 1this.tableProDate.length = 0this.tableProDate.push({tagCell1:'',placeholder:'表头内容'})this.tagCellObj = {tagCell1:'',}},addRow(){   //添加行let param = Object.assign({},this.tagCellObj,{placeholder:'内容'})this.tableProDate.push(param)},delRow(index){  //删除行this.tableProDate.splice(index,1)},addCell(){   //添加列this.cellLength = Object.keys(this.tagCellObj).length +1if( this.cellLength==6){return}let lable = 'tagCell'+this.cellLengththis.tableProDate.map((item,index)=>{this.$set(item,lable, '');if(index==0){item.placeholder = '表头内容'}else{item.placeholder = '内容'}})this.$set(this.tagCellObj,lable, '');}}}

如果有其他好的实现方法请推荐一下，继续学习。。。

vue table表格自定义相关推荐

vue+elementui 项目 table表格自定义排序规则
vue+elementui 项目 table表格自定义排序规则官方解释: 在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false.可以通过 Tab ...
顶级好用的 5 款 Vue table 表格组件测评与推荐
本文首发:<顶级好用的 5 款 Vue table 表格组件测评与推荐 - 卡拉云> Vue table 表格组件作为绝大多数项目需要内嵌的组件,可谓十分重要.表格看起来虽简单,实则坑很深 ...
vue table表格时间字段分两行（ parseTime-格式化时间）
vue table表格时间字段分两行( parseTime-格式化时间) 后台获取的时间字段 createTime: "2021-11-02 16:37:50" 在表格中将日期与 ...
ant vue table表格隐藏列
ant vue table表格隐藏列随手记一下
ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
Element-UI table表格自定义样式
Element-UI中关于table表格的样式操作自定义列的内容: 需求:在表格最后一栏添加操作按钮通过slot-scope="scope"添加操作按钮,这是专门为我们提供的插 ...
微信小程序table表格自定义组件实现
效果 1. 左图是多列并且给了最大高度的效果. 2. 右图是没有给某列固定宽度并且四列的宽度加起来不超出屏幕宽度的效果. 3. 在不为某列设置固定宽度的情况下,四列及四列以下均是平分屏 ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
vue table表格中身份证隐藏中间几位
table表格中的显示 <el-table-column label="证件号" align="center" prop="licenseNum ...

vue table表格自定义

vue table表格自定义相关推荐

最新文章

热门文章