精华内容
下载资源
问答
  • vue动态表格添加删除数据代码是一款输入用户名和年龄自由添加用户信息表格,可以删除用户信息,支持批量全部删除表格数据代码。
  • vue动态表格添加删除数据代码是一款输入用户名和年龄自由添加用户信息表格,可以删除用户信息,支持批量全部删除表格数据代码。
  • vue 动态表格+表格合并

    千次阅读 2018-09-28 08:56:31
    表格展示 ②当前级别部门可进行操作,并对当前选中部门添加active状态 代码解读: ①表格展示 原理: 部门数据进行树结构转化,table for 循环当前级别, table内套table  v-if 进行数据判断,存在当前...

    整体实现原理: table 套 table

    实现效果:

    ①表格展示

    ②当前级别部门可进行操作,并对当前选中部门添加active状态

    代码解读:

    ①表格展示

    原理: 部门数据进行树结构转化,table for 循环当前级别, table内套table

                v-if  进行数据判断,存在当前级别部门显示部门名称,不存在时显示--

     

    后台返回数据列表形式,不符合前端展示,进行转化

    // 部门信息  二叉树结构
        departmentInfo: function(p){
        	let param = {
    			pageNum: 1,
    			pageSize: 9999,
    			key: p ? p.key : ""
    		}
        	let department = [];
    		showDepartmentList(param).then((data) => {
    			data.list.list.forEach(function(item,i){
    				if(item.superiorId == 0){
    					if(p && item.departmentName.indexOf(p.key) != -1){
    						department.push({value:item.id,label:item.departmentName,superiorId:item.superiorId,children:[]})
    					}else if(!p){
    						department.push({value:item.id,label:item.departmentName,superiorId:item.superiorId,children:[]})
    					}
    				}else{
    					department.forEach(function(dep,j){
    						if(item.superiorId == dep.value){
    							dep.children.push({value:item.id,label:item.departmentName,superiorId:item.superiorId,children:[]})
    						}
    						dep.children.forEach(function(depSecond,z){
    							if(item.superiorId == depSecond.value){
    								depSecond.children.push({value:item.id,label:item.departmentName,superiorId:item.superiorId,children:[]})
    							}
    						})
    					})
    				}	
    			})
    	    }) 
        	return department;
        },

    二叉树结构数据进行前端展示: 

    <table class="depart_table" style="width: 100%" cellpadding="0" cellspacing="0">
      	<tr>
            <td class="th" style="width: 90px;">序号</td>
            <td class="th">部门名称</td>
            <td class="th td_2" style="width: 60%;">
            	<table style="width: 100%" cellpadding="0" cellspacing="0">
            		<tr>
            			<td>一级部门</td>
            			<td class="td_2">二级部门</td>
            		</tr>
            	</table>
            </td>
            <!--<th>二级部门</th>-->
      	</tr>
    	<tr v-for="(dep,index) in departmentList" >
    		<td class="border_bottom border_left_no">{{index+1}}</td>
            <td class="border_bottom enable" v-bind:class="[activeId==dep.value ? 'active' : '']" @click='tdSelect(dep)'>
            	{{dep.label}}
            </td>
            <td class="padding_no">
            	<table style="width: 100%;height: 100%;" cellpadding="0" cellspacing="0">
            		<!-- 仅存在部门时 -->
            		<tr v-if="dep.children.length==0">
            			<td class="border_bottom">--</td>
            			<td class="border_bottom td_2">
            				<table style="width: 100%" cellpadding="0" cellspacing="0">
            					<tr>
            						<td>--</td>
            					</tr>
            				</table>
            			</td>
            		</tr>
            		<!-- 生成1级部门 -->
            		<tr v-else v-for="depFirst in dep.children">
            			<td colspan="2" class="border_bottom enable" v-bind:class="[activeId==depFirst.value ? 'active' : '']" @click='tdSelect(depFirst)'>
            				{{depFirst.label}}
            			</td>
            			<!-- 生成2级部门 -->
            			<td class="td_2">
            				<table style="width: 100%" cellpadding="0" cellspacing="0">
    	        				<tr v-if="depFirst.children.length==0">
    			        			<td class="border_bottom">--</td>
    			        		</tr>
    		        			<tr v-else v-for="depSecond in depFirst.children">
    			        			<td class="border_bottom enable" v-bind:class="[activeId==depSecond.value ? 'active' : '']" @click='tdSelect(depSecond)'>
    			        				{{depSecond.label | defaultStr}}
    			        			</td>
    			        		</tr>
    	        			</table>
            			</td>
            		</tr>
            	</table>
            </td>
    	</tr>
    </table>

    ②当前级别部门可进行操作,并对当前选中部门添加active状态

    script: data 内声明数据, 动态绑定class,并存储当前级别部门信息

    export default {
        data() {
            activeId: "",
            tdSelectList: {
    		    id: null,
    		    departmentName: "",
    		    superiorId: null
    		},
        },
        mouted:{
            tdSelect: function(dep){
    	        this.tdSelectList = {
    		        id: dep.value,                // 当前部门id
    		        departmentName: dep.label,    // 当前部门名字
    		        superiorId: dep.superiorId    // 当前部门 上级id
    		    }
    	        this.activeId = dep.value;
    	    },
        }
    }

    单元格操作按钮绑定事件: 对选中的单元格进行操作

    <el-button class="pull-right" type="primary" @click="departmentCreatDialogShow()">创建</el-button>
    <el-button class="pull-right" type="" @click="departmentModifyDialogShow(1)">修改</el-button>
    <el-button class="pull-right" type="" @click="departmentDelete()">删除</el-button>

    <!-- 部门修改 -->
    <el-dialog title="部门修改" :visible.sync="departmentModifydialogVisible">
    	<el-row>
    	    <el-form :model="departmentModifyList" status-icon ref="departmentModifyList" :rules="departmentModifyRules">
    	        <el-form-item prop="departmentName">
    	        	<el-col :span="3"><div class="grid-content">
    	        		{{departmentModifyList.labelName}}
            		</div></el-col>
            	    <el-col :span="21"><div class="grid-content">
            	    	<el-input type="text" v-model="departmentModifyList.departmentName" auto-complete="off"></el-input>
            	    </div></el-col>
    	        </el-form-item>
    	    </el-form>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button @click="departmentModifydialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="departmentModifySubmit('departmentModifyList')">确 定</el-button>
        </div>
    </el-dialog>
    departmentModifySubmit: function(formName){
    	this.$refs[formName].validate((valid) => { 
    		if (valid) {
    			let param = {
            		id: this.tdSelectList.id,
            		departmentName: this.departmentModifyList.departmentName
            	}
            	updateDepartment(param).then((data) => {
      				if(data.succeed){
      					this.departmentModifydialogVisible = false;
      					this.$message({ type:"success", message: data.retMsg });
            			let param2 = {
    		      			pageNum: 1,
    		      			pageSize: this.departmentPagesize,
    		      			key: this.departmentSearch
    		      		}
    		      		this.departmentGetUser(param2);	
      				}else {
      					this.$message.error(data.ret.retMsg);
      				}
          		})
    		}else {
    			console.log('error submit!!');
    		}
    	})	
    },

     

    展开全文
  • vue动态表格添加

    2019-09-22 17:21:23
    //vue /*   :open.sync="openStain" title="污点管理">    污点类型">      请选择" @change="changeEffect(scope.row)">  请选择污点类型">  ...

    clusterDetail.effectList=["请选择污点类型","NOSchedule","NoExecute","preferNoSchedule"];
    clusterDetail.effectDescList=["请选择污点类型","新的不能容忍的pod不能再调度,老的pod不收影响","新的不能调度,老的pod被驱逐","pod会尝试将pod分配到该节点"];
    //获得污点列表
    function getStains(clusterUuid,nodeName){
         return clusterService.getTaints(clusterUuid,nodeName).then(function(data){
             var  stainsDataMap=data.map(function(item){
                 if(item.effect==""){
                     item.desc=clusterDetail.effectDescList[0];
                 }else if(item.effect==clusterDetail.effectList[1]){
                     item.desc=clusterDetail.effectDescList[1];
                 }else if(item.effect==clusterDetail.effectList[2]){
                     item.desc=clusterDetail.effectDescList[1];
                 }else if(item.effect==clusterDetail.effectList[2]){
                     item.desc=clusterDetail.effectDescList[1];
                 }else if(item.effect==clusterDetail.effectList[3]){
                     item.desc=clusterDetail.effectDescList[3];
                 }
                 return item;
             })
             clusterDetail.stainsOptions.stainsData=stainsDataMap;
         })
    }
    clusterDetail.stainsOptions.addStain = function(){
        clusterDetail.stainsOptions.stainsData.push({effect:'',desc:'请选择污点类型',key:'',value:'',index:(clusterDetail.stainsOptions.stainsData.length)})
    }
    //验证相同类型下的key不能重复
    function checkKeyDouble(stainData){
        var NoScheduleTemp=[],NoExecuteTemp=[],PreferNoScheduleTemp=[];
        stainData.forEach(function(map,index){
            if(map.effect==clusterDetail.effectList[1]){//"NoSchedule"
                NoScheduleTemp=stainData.filter(function(item){return item.effect==clusterDetail.effectList[1]});
            }
            if(map.effect==clusterDetail.effectList[2]){//"NoExecute"
                NoExecuteTemp=stainData.filter(function(item){return item.effect==clusterDetail.effectList[2]});
            }
            if(map.effect==clusterDetail.effectList[3]){//"PreferNoSchedule"
                PreferNoScheduleTemp=stainData.filter(function(item){return item.effect==clusterDetail.effectList[3]});
            }
        })
        if(NoScheduleTemp.length>1){
            var keyTemp=[];
            NoScheduleTemp.forEach(function(map,index){
                if(keyTemp.indexOf(map.key)>=0){
                    $("#stainsErrorNote").html('相同污点类型下,key值不能重复');
                    return;
                }else{
                    $("#stainsErrorNote").html('');
                }
                keyTemp.push(map.key);
            })
        }
        if(NoExecuteTemp.length>1){
            var keyTemp=[];
            NoExecuteTemp.forEach(function(map,index){
                if(keyTemp.indexOf(map.key)>=0){
                    $("#stainsErrorNote").html('相同污点类型下,key值不能重复');
                    return;
                }else{
                    $("#stainsErrorNote").html('');
                }
                keyTemp.push(map.key);
            })
        }
        if(PreferNoScheduleTemp.length>1){
            var keyTemp=[];
            PreferNoScheduleTemp.forEach(function(map,index){
                if(keyTemp.indexOf(map.key)>=0){
                    $("#stainsErrorNote").html('相同污点类型下,key值不能重复');
                    return;
                }else{
                    $("#stainsErrorNote").html('');
                }
                keyTemp.push(map.key);
            })
        }
    }

    //vue
    /*
     <pay-modal  :open.sync="openStain" title="污点管理">
            <pay-data-table :data="stainsData">
                <pay-table-column prop="effect" label="污点类型">
                    <template slot-scope="scope">
                        <div :title="scope.row.effect">
                            <pay-select v-model="scope.row.effect" :multiple="false" placeholder="请选择" @change="changeEffect(scope.row)">
                               <pay-option value="" label="请选择污点类型"></pay-option>
                               <pay-option value="NoSchedule" label="NoSchedule"></pay-option>
                               <pay-option value="NoExecute" label="NoExecute"></pay-option>
                               <pay-option value="PreferNoSchedule" label="PreferNoSchedule"></pay-option>
                            </pay-select>
                        </div>
                    </template>
                </pay-table-column>
                <pay-table-column prop="key2" label="键">
                    <template slot-scope="scope">
                        <div :title="scope.row.key2">
                            <pay-input v-model="scope.row.key2" placeholder="请输入键"/>
                        </div>
                    </template>
                </pay-table-column>
                <pay-table-column prop="value" label="值">
                    <template slot-scope="scope">
                        <div :title="scope.row.value">
                            <pay-input v-model="scope.row.value" placeholder="请输入值"/>
                        </div>
                    </template>
                </pay-table-column>
                <pay-table-column prop="desc" label="值">
                    <template slot-scope="scope">
                        <div :title="scope.row.desc">
                            <span>{{scope.row.desc}}</span>
                        </div>
                    </template>
                </pay-table-column>
                <pay-table-column label="操作">
                    <template slot-scope="scope">
                        <pay-button @click="delStain(scope.row.keys)">删除</pay-button>
                    </template>
                </pay-table-column>
            </pay-data-table>
        </pay-modal>    
     
      */
     changeEffect(row){
         if(row.effect==""){
             this.$set(row,'desc',this.effectDescList[0]);
         }else if(row.effect==this.effectList[1]){
             this.$set(row,'desc',this.effectDescList[1]);
         }else if(row.effect==this.effectList[2]){
             this.$set(row,'desc',this.effectDescList[2]);
         }else if(row.effect==this.effectList[3]){
             this.$set(row,'desc',this.effectDescList[3]);
         }
     }
     addStains(){
         this.stainsData.push({effect:'',desc:"请选择污点类型",Key2:'',value:''});
     }
     delStain(row){
         for(let i=0;i<this.stainsData.length;i++){//删除的时候避免不是 删的不是对应的数据
             let obj2=this.stainsData[i];
             if(obj2.key2==row){
                 if(!row){
                     this.stainsData.splice(i,1);
                     break;
                 }else{
                     this.stainsData.splice(i,1);
                     i--;
                 }
             }
         }
     }

    展开全文
  • 直接上代码 // 表格数据 templateData: [], // 表格遍历 tableHeaders: [ { label: 'Description', prop: 'Des', width: 'auto', minWidth: 150 }, { label: 'Create Time', prop: 'CreateTime', width: 'auto'}, { ...

    直接上代码

    <el-table
            :data="templateData"
            style="width: 100%;" stripe
            ref="templateTable"
            :empty-text="$t('basic.noData')" @filter-change="filterTable"
            @sort-change="sortData">
        <template v-for="(item, index) in tableHeaders">
            <el-table-column v-if='item.prop == "per"' :key='index' :label='item.label' :prop='item.prop' :width="item.width" sortable>
                <template slot-scope="scope">
                    <el-progress class="NewCMMonitorPro" :text-inside="true" :percentage="70" :width="scope.row.width"></el-progress>
                </template>
            </el-table-column>
            <el-table-column v-else-if='item.prop == "Actions"' :key='index' :label='item.label' :prop='item.prop' :width="item.width" sortable>
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleEdit(scope.row)" style="color: #1E90FF;font-size: 14px;">
                        <i class="el-icon-notebook-2" style="font-size: 15px;" title="More"></i>
                        <!--More-->
                    </el-button>
                    <el-button size="mini" type="text" plain @click="handleDelete(scope.row)" style="color: #1E90FF;font-size: 14px;">
                        <i class="el-icon-delete" style="font-size: 15px;" title="Delete"></i>
                        <!--Delete-->
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    v-else
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :column-key="item.prop"
                    :min-width="item.minWidth"
                    :width="item.width"
                    show-overflow-tooltip sortable>
            </el-table-column>
        </template>
        <!-- 过滤 -->
        <el-table-column width="40" align="center" :filters="filters" filter-placement="bottom"
                         column-key="filter">
            <template slot="header">
                <el-popover placement="left" trigger="hover" content="FILTER" :visible-arrow="false">
                    <i slot="reference" class="el-icon-setting" style="cursor: pointer;"></i>
                </el-popover>
            </template>
        </el-table-column>
    </el-table>
    // 表格数据
    templateData: [],
    // 表格遍历
    tableHeaders: [
        { label: 'Description', prop: 'Des', width: 'auto', minWidth: 150 },
        { label: 'Create Time', prop: 'CreateTime', width: 'auto'},
        { label: 'End Time', prop: 'FinishedTime', width: 'auto'},
        { label: 'Creator', prop: 'CreateUser', width: 'auto'},
        { label: 'Progress', prop: 'per', width: 'auto'},
        { label: 'Actions', prop: 'Actions', width: '80'}
    ],
    // 过滤表格
    filters: [
        { text: 'Description', value: 'Des'},
        { text: 'Create Time', value: 'CreateTime'},
        { text: 'End Time', value: 'FinishedTime'},
        { text: 'Creator', value: 'CreateUser'},
        { text: 'Progress', value: 'per'},
        { text: 'Actions', value: 'Actions'},
    ]

     

    展开全文
  • 效果: 父组件 export default class ShowQuote extends Vue { private parentTableDate: Array = [ { id: "父级1", a: "父级a", aa: "父级aa", aaa: "父级aaa", name: "父级头部1", tableData: [ {...

    效果:

    父组件

    export default class ShowQuote extends Vue {

    private parentTableDate: Array = [

    {

    id: "父级1",

    a: "父级a",

    aa: "父级aa",

    aaa: "父级aaa",

    name: "父级头部1",

    tableData: [

    {

    id: "子id1",

    name: "子名称1",

    category: "子级备注1"

    },

    {

    id: "子id11",

    name: "子名称11",

    category: "子级备注11"

    }

    ]

    },

    {

    id: "父级2",

    a: "父级a",

    aa: "父级aa",

    aaa: "父级aaa",

    name: "头部2",

    tableData: [

    {

    id: "子级2",

    name: "子级2",

    category: "子级备注2"

    }

    ]

    }

    ];

    }

    父组件绑定值

    子组件:

    highlight-current-row

    border

    @select="selectChange"

    @select-all="selectChange"

    ref="table"

    @row-click="expandChange"

    :row-key="getRowKeys"

    :expand-row-keys="expands"

    @expand-change="expandChange">

    border>

    label="子id"

    >

    label="子名称"

    >

    label="子其他">

    >

    prop="id">

    prop="name">

    删除

    编辑

    import { Component, Prop, Vue } from "vue-property-decorator";

    @Component

    export default class PurchaseTable extends Vue {

    @Prop() private parentTableDate!: [];

    // 获取row的key值

    getRowKeys(row) {

    return row.id;

    }

    private expands: Array = [];

    selectChange(selection) {}

    // 手风琴收起展开   如果不需要可以删掉下面这段

    expandChange(row) {

    let temp = this.expands;

    this.expands = [];

    this.expands.push(row.id);

    if (temp.length === 1 && temp[0] === row.id) {

    // 收起展开行

    this.expands = [];

    }

    }

    }

    展开全文
  • VUE动态合并表格

    2020-08-04 17:24:56
    VUE动态合并单元格 getSlectList (v) {//获取table数据 // 这个是如果要合并的字段行间隔隔开几行可以使用排序 // 但是我这边没有隔开且点击后面添加删除时会将行数不稳定 // v = v.sort(//一级指标排序 //...
  • 主要为大家详细介绍了Vue动态生成表格的行和列,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue动态渲染表格

    2021-03-25 19:50:48
    所以需要动态渲染个表格的列,如下图中2人团价格以及3人团价格表头 需求描述: 当后台管理员选择开团的类型后,所关联的参团商品设置sku时,会动态渲染参团类型所对应的价格。 如下图sku设置。 ![]...
  • vue bootstrap动态表格编辑代码 vue基于bootstrap制作动态表格添加删除行列表和编辑修改行内容效果代码。 演示地址 下载地址
  • VUE Element 动态表格

    2020-08-20 12:44:55
    <!DOCTYPE html> <... <head> ...meta charset="UTF-8" />...meta name="viewport" content="width=device-width, initial-scale=1.0" />...VUE ELEMET UI 动态表格</title> <.
  • vue 动态合并表格

    2019-06-09 01:38:47
    跟普通的合并表格不同的是 这个表格数据的列头不固定… <template> <div> <table> <thead> <th v-for="(item,index) in table.columns" :key="index" :style="'minWidth:'+ ...
  • 一款bootstrap风格样式的很实用的vue动态添加删除表格数据代码,输入用户名和年龄自由添加用户信息表格,可以删除用户信息,支持批量全部删除表格数据。
  • element-ui+vue实现表格动态添加表格行,并且可以进行上下移动 由于项目需求,我所实现的是表格可以添加多个,并且每一个表格内的表格行也可以进行动态添加 下面是代码的实现 html代码部分: <draggable v-...
  • vue创建动态表格数据

    千次阅读 2019-05-10 15:00:39
    1.HelloWorld.vue <template> <div class="tablePage"> <table class="table1"> <tr class="tr1"> <td class="tit td1">统一社会信用代码</td> <td class="td...
  • 今天小编就为大家分享一篇对Vue table 动态表格td可编辑的方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 2、框架Vue 3、ui框架 ant design for Vue 版本:1.7.2 4、最重要的是 数据结构分析 4、数据结构 form: { modalEndpointId: '', shareParams: [ { modelMetrics: '', modalCheck: '', modalCheckValue: '', ...
  • Vue 动态生成表格的行和列

    万次阅读 热门讨论 2018-08-22 21:43:57
    当在开发项目的时候,固定的页面表格标题及内容不能满足需求,需要根据不同的需求动态加载不同的表格表头和表格的内容,具体的实现代码如下: &lt;template&gt; &lt;div class="boxShadow"...
  • vue element表格动态表头、动态

    千次阅读 2019-07-25 17:34:56
    // 控制表格头部哪些显示哪些不显示 showChoose () { this.isChooseCols = true; }, hideChoose () { this.isChooseCols = false; }, } 效果图(css就不写了,有公共的,比较麻烦)
  • vue项目动态表格渲染,表格编辑,上传文件,多个table表格展示等(具体见代码)分享给有需要的家人们 页面代码 template <template> <div> <el-header style="height:50px"> <el-row :...
  • 当在开发项目的时候,固定的页面表格标题及内容不能满足需求,需要根据不同的需求动态加载不同的表格表头和表格的内容,具体的实现代码如下::data="tables"ref="multipleTable"tooltip-effect="dark"style="width: ...
  • Vue ElementUI表格动态表单&参数校验

    千次阅读 2020-11-11 13:09:20
    本文代码 https://github.com/tothis/vue-record/blob/master/client/src/views/el-table-form.vue <template> <div> <el-button @click="addRow">新增</el-button> <el-form :model...
  • 最近项目经常用到带有合并效果以及动态列的表格,而翻阅iview和element-ui官网没有找到合适的(也有可能自己的水平有限,不会改写),所以只好自己用原生表格写了一个,具体效果如下: 这个表格右侧表头的会员等级列...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 941
精华内容 376
关键字:

vue动态表格

vue 订阅