精华内容
下载资源
问答
  • vue实现表格列位置的拖拽

    千次阅读 2018-12-27 14:18:40
    此功能是针对vue项目的表格拖拽,以自定义指令的形式来完成交互的. 主要原理的dom节点的交换; 交互思路: 1.首先要获取当前点击的th,并且在页面创建个大小内容和th一模一样的div.并设置当前div的样式始终随着鼠标...

    首先我们看下最终的交互效果:

    此功能是针对vue项目的表格拖拽,以自定义指令的形式来完成交互的.

    主要原理的dom节点的交换;

    交互思路:

    1.首先要获取当前点击的th,并且在页面创建一个大小内容和th一模一样的div.并设置当前div的样式始终随着鼠标.

    2.将页面上所有的th的宽度保存到一个数组中(thWidthArr),获取保存下来当前点击的th的index(directionIndex),和鼠标拖动到最后松开的时候所停留的th的index(finallIndex);

    3.当鼠标拖拽到确定的位置,将最初始的th和插入到当前位置(通过directionIndex和finallIndex来确定)

    完整代码请移步:https://github.com/slailcp/vue-dragTable 哦

    然后就完成啦,话不多说上代码

    自定义指令名字叫做 "slldrag" 使用的时候就是v-slldrag,

    Vue.directive("slldrag",{
        bind:(el)=> {
          let op = el;  //获取当前元素
    
          op.onmousedown = (e) => {
            //算出鼠标相对元素的位置
            let disX = e.clientX - op.offsetLeft;
            let disY = e.clientY - op.offsetTop;
    
            let thWidthArr = []; // 记录所有的th的宽度,依次累加
            let finallIndex = 0;//最终的th index
            let directionIndex = 0; // 单击的是第几个th
            let $insertTh = null;
    
            $insertTh = e.target; //
    
            const $th = op.parentNode.children; // 获取所有th
            for(let thi = 0;thi<$th.length;thi++){
              const itemth = $th[thi];
              itemth.index = thi;
              let offsetWidth = 0;
              if(thi === 0){
                offsetWidth=itemth.offsetWidth+offsetWidth; // 如果是第一个th就不进行累加操作
              }else{
                offsetWidth = itemth.offsetWidth+thWidthArr[thi-1]; // 累加th的宽度
              }
              thWidthArr.push(offsetWidth)
            }
            directionIndex = e.target.index;
    
            // 以鼠标按下的这个th处,创建一个和th内容一样的div,
            const $createDiv = document.createElement('div');
            $createDiv.id = 'created-div';
            document.getElementById('drag-table').appendChild($createDiv);
    
            document.onmousemove = (e)=>{
              //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
              let left = e.clientX - disX;
              let top = e.clientY - disY;
              if(Math.abs(e.clientX - disX - op.offsetLeft)<10){return;}
              //绑定元素位置到positionX和positionY上面
              // this.positionX = top;
              // this.positionY = left;
    
              //移动当前元素
              const thText = op.innerHTML;
              $createDiv.innerHTML = thText;
              $createDiv.style.position = 'absolute';
              $createDiv.style.width = op.offsetWidth + 'px';
              $createDiv.style.height = op.offsetHeight + 'px';
              $createDiv.style.background = '#666';
              $createDiv.style.left = left + 'px';
              $createDiv.style.top = top + 'px';
    
              finallIndex = 0; //鼠标拖动过程中所停留在的th的index
              if(left<=0){ // // 小于0的时候就等于0
                finallIndex = 0;
              }else if(left>thWidthArr[thWidthArr.length-1]){ // 大于最后一个的时候就最后一个+1
                finallIndex = thWidthArr.length;
              }else{
                for (let i = 0;i<thWidthArr.length;i++){
                  if(left >= thWidthArr[i-1] && left <= thWidthArr[i]){
                    finallIndex = i;
                  }
                }
              }
    
              // 拖动的时候用红线标识拖动到哪个位置
              /*****************此处dom交互较多,省略省略省略省略省略省略*****************/
    
            };
            document.onmouseup = (e) => {
              const $tr = document.getElementById('drag-table').getElementsByTagName('table')[0].getElementsByTagName('tr');
              document.getElementById('drag-table').removeChild($createDiv);
    
              // 鼠标抬起恢复表格的样式
              /*****************此处dom交互较多,省略省略省略省略省略省略*****************/
    
              // 取消鼠标拖动和鼠标抬起事件
              document.onmousemove = null;
              document.onmouseup = null;
    
              // 如果没有进行拖动操作(鼠标点下就抬起)
              if(Math.abs(e.clientX - disX- op.offsetLeft)<10){
                thWidthArr = [];disX = 0;
                return;
              }
    
              // 遍历tr,将th和td放到最终的位置上
              for(let tri = 0;tri<$tr.length;tri++){
                const itemtr = $tr[tri];
                if(itemtr.getElementsByTagName('th').length){
                  const $ths = itemtr.getElementsByTagName('th');
                  itemtr.insertBefore($insertTh,$ths[finallIndex]);
                }
                if(itemtr.getElementsByTagName('td').length){
                  const $tds = itemtr.getElementsByTagName('td');
                  itemtr.insertBefore($tds[directionIndex],$tds[finallIndex]);
    
                }
              }
    
              // 重置thWidthArr和disX
              thWidthArr = [];disX = 0;
    
            };
          };
        }
      });

    完整代码请移步:https://github.com/slailcp/vue-dragTable 哦

     

     

     

    展开全文
  • 1.获取到每一列的数据 2.得到每列的最大值和最小值 3.得到当前列的属性所在行的索引 4.得到最大值和最小值所在列的索引(相当于知道了这个值得坐标) 5.改变单元格颜色(利用的是element-ui的表格中自带的方法) <...

    记录一下最近开发中遇到的一些问题,需求是将表格中一列数据的所有最大值单元格变成蓝色(值相同的也要变色),最小值单元格变成红色。表格总共有22列,列数较多,所以采用了循环的方式。
    首先,来讲一下我的思路。
    1.获取到每一列的数据
    2.得到每列的最大值和最小值
    3.得到当前列的属性所在行的索引
    4.得到最大值和最小值所在列的索引(相当于知道了这个值得坐标)
    5.改变单元格颜色(利用的是element-ui的表格中自带的方法)

    <vp-table
          :data="tableData"
          border
          stripe
          fit
          height="600"
          style="width: 100%;"
          :cell-style="addStyle" //就是它
        >
    
    addStyle({ row, column, rowIndex, columnIndex }) {
    //四个参数中要确定两个才能给指定单元格添加样式
          if (columnIndex == 3) {
            let newObject = [];
            for (let i = 0; i < this.tableData.length; i++) {
            //terminalCustomers是我的表格中列索引为3的属性名,将后台返回的数组对象中属性名为terminalCustomers的利用for循环拿出来,并和纵坐标(rIdx)以对象的形式放到newObject中
              let attr = this.tableData[i].terminalCustomers; 
              let rIdx = i;
              // newObject中放的是当前属性下元素值和元素对应纵坐标
              newObject.push({
                attr: this.tableData[i].terminalCustomers,
                rIdx: i,
              });
            }
            // 将一列中的数据放到arr中
            let arr = [];
            for (var j = 0; j < newObject.length; j++) {
              arr.push(Number(newObject[j].attr));
            }
            //得到最大值和最小值
            let max = Math.max.apply(null, arr);//直接Math.max(arr)会报错
            let min = Math.min.apply(null, arr);
    
            let arr1 = [];
            let arr2 = [];
            
    		//因为一列中可能有两个值是一样大的,他们的单元格样式都需要改变,所以遍历newObject这个数组对象,将相同属性值对应的总表表取出来放到一个空数组中
            for (let c = 0; c < newObject.length; c++) {
              //得到所有最大值所在行的所有索引
              if (Number(newObject[c].attr) == max) {
                arr1.push(newObject[c].rIdx);
                //得到所有最小值所在行的所有索引
              } else if (Number(newObject[c].attr) == min) {
                arr2.push(newObject[c].rIdx);
              }
            }
            //已知横坐标,对纵坐标进行遍历渲染,将最大值全部变色
            for (let m = 0; m < arr1.length; m++) {
              if (columnIndex == 3 && rowIndex == arr1[m]) {
                return `background:rgb(196,215,155)`;
              }
            }
            //将最小值全部变色
            for (let s = 0; s < arr2.length; s++) {
              if (columnIndex == 3 && rowIndex == arr2[s]) {
                return `background:rgb(230,184,183)`;
              }
            }
          }
         }
    

    到此,就完成了。但是这种方法对于列数少的还好,列数多的情况下就增加了很多的代码量。
    也有想过要封装起来,但是封装过程中遇到了很多问题。所有如果大神们有更好的方式或者封装方法,请留言告诉我。不胜感激!拜谢!

    展开全文
  • 然后赋值在表格对应商品中的订单下拉框中,因为我是扫码枪扫码获取数据,每次扫码都会新加一条数据进入表格,所以扫入的数据不同,所对应的订单号也不同,第次扫码查到订单号并且查到...
  • 在el-form外加上层 <template slot-scope="scope"> <...这是因为在这里使用ElementUI表格模板渲染数据时,当前行数据的获取也会用到插槽,scope相当于行的数据, scope.row相当于当前行的

    在el-form外加上一层

     <template slot-scope="scope">
            <div>
    

    slot-scope="scope"是重点,这是作用域插槽中定义一个对象(这里对象被定义为scope)来存储插槽上绑定的数据的用法
    在el-input的v-model中使用scope.row.xxx来绑定v-model
    这是因为在这里使用ElementUI表格模板渲染数据时,当前行数据的获取也会用到插槽,scope相当于一行的数据, scope.row相当于当前行的数据对象,
    在这里插入图片描述

    展开全文
  • 问题:当我们在表格中会有以下点击按钮,然后获取该行的某信息; 在 修改按钮 上设置 οnclick="edit(this)" function edit(val){ //这里就是val,别以为写错了,如果写成this会报错:Uncaught Syntax...

     

     

    问题一:当我们在表格中会有以下点击按钮,然后获取该行的某列信息;

     

    在 修改按钮 上设置 οnclick="edit(this)"

    function edit(val){ 
    
            //这里就是val,别以为写错了,如果写成this会报错:Uncaught SyntaxError: Unexpected token 'this',这是转过来的参数值的意思
            var value = $(val).parent().parent().find("td");
    
            console.log(value.eq(1).text());   //15900012520  得到第二列的数据
    
    }

    参考:这个博客的案例

       

     

    问题二:当我们选择checkbox的单选或多选框,获取该行的某列数据

    比如你要获取选中的这行的IMEI号:

        //获取选中那列的数据
         var checkLength = $("input:checkbox[name='checksId']:checked").length;
    
          //if(checkLength == 0) {
          //    alert("请至少勾选中一项需要删除的内容!");
          //    return;
         // }
    
          $("input[type='checkbox']").each(function(){ //遍历checkbox的选择状态
              if($(this).prop("checked")){ //如果值为checked表明选中了
                 // console.log("选中该行的IEMI:"+$(this).closest('tr').find('td').eq(7).text());
                 var delei = $(this).closest('tr').find('td').eq(7).text();//获取eq为7的那一列数据(就是第7列)
                  console.log("选中改行的列值:"+typeof delei+delei);
    
    
              }
          });
    

     

    问题三:鼠标移到哪一行,就显示哪一行的某列内容;

    略!没做过,可个人思路是:类似上面,先定义鼠标移到该行的操作,如:hover,然后才定义一个获取方法(前面用的的是onclick);

     

    总结:获取每行的某列数据,列出常用几条(用JS或者JQ都没有区别):

    (1) var value = $(this1).parent().parent().find("td").eq(1).text();//获得该行的第二列数据

    (2) var value = $(this).closest('tr').find('td').eq(7).text();//获取eq为7的那一列数据(就是第7列)

    (3)var value = $(this).children().eq(1).text();//所点击的一行的第二个td内容

    (4)var value = $(this).find("td").eq(1).html();

     

    最后.text()和.html()获得文本信息和页面信息,记得自己要获得的是什么?可以尝试下,

    parent和closest和children这个分别是父元素和祖先元素和子元素,find是查找他们的父元素的意思

     

    可以取一反三!

     

    扩展简单说明:

    VUE实现就更简单咯!首先VUE需要绑定 @selection-change="handleSelectionChange",就是要获取表格行的内容

     handleSelectionChange(selection) {
                this.checkedList = selection;
                this.$emit("selection-change", this.checkedList);
    
            },  

    你在点击按钮事件,加上ROW该行内容,也就是你点击哪行就获取哪行的内容,如:editClick(row) {}

    把获取的内容保存起来,如果弹出的diglog窗口,那就把这些值传过去;(父子类相互传值的VUE方法:prop、emit,百度一下)

     

    展开全文
  • vxe-table是个基于vue表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念: 面向...
  • vue + element 实现可编辑表格、动态渲染表头表格数据、向数据...3,我的需求,做个比赛项目打分表,评委可以实现在线打分,表头和表格数据首先都是动态获取后台数据进行渲染,这里我先写成假数据以供大家参考...
  • 前段时间写过篇文章基于element实现后台管理系统,并提到excel表格导出功能,可能描述不是很详细,现在单独整理出。 后端提供的接口: // 下载分拣列表 export function getAssormentExport(params) { return ...
  • 在渲染之前会先请求后端获取表格内容在获取对应的枚举值。 在该页面中,如果前一列是基本类型,需要显示最大容量或最大需量,如果是电度电价需要显示对应的kv数。也就是说需要根据前一列的值去发送不同的请求。 ...
  • 在.vue组件中如果想要在表格中某获取表格中这行的某对应的数据,需要用slot-scope具名插槽,刚开始写slot-scope时会出现下图错误: 这是因为我们的Vetur差价中using eslint-plugin-vue默认是勾选的,我们...
  • 现在我想知道应该用什么方法来获取处于激活状态的。没有找到类似 getActiveRow 的方法 <p><strong>请提供能重现问题的链接(<a href="https://jsfiddle.net/w8q6unes/">jsfiddle、...
  • 由于项目需求,需要有个动态表格,可以根据配置或从后台获取表格属性。 场景描述: 现有个胡萝卜厂生产不同品种的胡萝卜,为了便于客户了解产品,现需在官网展示胡萝卜信息。现有的萝卜信息:编号(id)、...
  • 标签这一列是个数组,想要在循环table时,在表格中嵌入子循环 直接使用双循环可以拿到数据,但是我想用element ui的表格组件,像下面这样 表格中用了:data来绑定数据,直接用v-for是拿不到数据的,像下面这样 ...
  • 简历列表中的姓名,使用的是template模板包裹结构,对应参数也是有elementui组件内置方法获取,自己无法将数据提取出来,且表格部分将进行多次渲染,效果无法实现,demo由于数据是自己开始就创建好的且没有复杂的...
  • 该回调函数会在校验结束后被调用,并传入两个参数:(是否校验成功,最近一列未通过校验的字段)。若不传入回调函数,则会返回一个 promise callback exportCsv 将表格数据导出为 .csv 文件,说明:支持IE9+、Edge...
  • 获取选中行的某个字段的值: 在属性中传入需要的值(row.field名),后面获取的时候,通过attr('属性名')来...checkbox:true//第一列显示复选框,若单选,需加入singleSelect },{ field:'operate', title:'操作', ...
  • 关键思想:1.template中加scope=”scope“属性,用来获取当前行中对应的的值;2.通过<el-input-number>与<sapn>的显示隐藏切换来实现编辑/不编辑状态 3.部分单元格不可编辑,利用后台传回的数据,加...
  • 、创建个commonApi.js文件,将点击事件提取到这里,并写获取调用此js中方法的vue组件实例(this)的方法: //用来获取 调用此js的vue组件实例(this) let vm = null; const sendThis = (_this)=>{ vm = _
  • elementui已经封装好了 el-table 组件,只需要指定 data 数据源即可,因此通常在 vue 实例生命周期的 created ...然而凡事皆有例外,比如在已有的table表格增加若干,而数据从不同的源获取,这时候再修改功能已经...
  • 最近在做的vue项目,从后台获取到的数据,由于部分字段的数据太长会将table自动撑开,很不美观。。 网上说的好多都是利用 !important给强制设置高度,但是我试过好像也不行,,,, 遇到这种的同学可以试试添加...
  • 1.如图: ...方法:objectSpanMethod() +rowSpan(),其中获取表格数据之后再调用rowSpan() <el-table highlight-current-row :data="DRD_EFaultMode_tableData" :span-method="obje...
  • vue-table-with-tree-grid A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView) ...当表格为多选类型表格时,用于获取当前所选项的属性,返回个数组;属性默认为'index'。 prop
  • 表格的某一列添加 type=“selection”,这一列就添加了复选框 <el-table-column type="selection" width="55" align="center"></el-table-column> 有了复选框,我们需要获取用户选择了哪些行数据,给...
  • 合并行:你需要知道那一列需要合并行,需要合并几行。 如图:我需要在第一列合并projectItem相等的行数,所以我们需要算出projectItem相等的行数有几行 计算出那些行数需要合并(projectItem相等的行数) ...
  • 主要思路:每次获取分页表格数据时动态计算每列列宽 我的需求是能实现自适应,且不出现横向滚动条,所以计算出来...后台返回给我的数据格式就是这样的,field0代表第一列,field1代表第二列,以此类推… 主要方法如下
  • vue项目中有表格操作需要“获取收藏状态”的方法,其中用到了forEach, 本来还好好的,结果当收藏列表为空时forEach报错了:"TypeError: Cannot read property 'forEach' of undefined"  具体...
  • 难点在于掌握对JS数组的操作和获取表格的当前行信息。我废话不多说,直接上代码; <el-card shadow="hover" style="height:403px;"> <el-dialog title="事项记录":visible.sync="dialogShow" widt

空空如也

空空如也

1 2 3
收藏数 43
精华内容 17
关键字:

vue获取表格一列

vue 订阅