VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据_vue elementui table实现动态勾选计算某一列的值(2)

最新推荐文章于 2024-07-18 18:02:30 发布

2401_84618790

最新推荐文章于 2024-07-18 18:02:30 发布

阅读量479

点赞数 8

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84618790/article/details/138933465

版权

程序员专栏收录该内容

103 篇文章 0 订阅

订阅专栏

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端资料图.PNG

在这里插入图片描述 1.模板定义

<el-table v-show="order"
 ref="multipleTable" 
 :v-loading="loading" 
 border :data="tableDataOrder" 
 height="69vh" 
 style="width: 100%; height: 69vh"
 @select-all="itemHandleSelectionAll" 
 @select="itemHandleSelectionChange" 
 @selection-change="selectionChangeHandler" 
>
			<el-table-column label="序号" width="70" align="left">
	            <template slot-scope="scope">
	              {{ (scope.$index+1) }}
	            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="unShipped" label="未发货数" />
          <el-table-column :show-overflow-tooltip="true" prop="price" label="单价">
            <template slot-scope="scope">
              <el-input v-model.number="scope.row.price" />
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="deliverNum" label="发货数量">
            <template slot-scope="scope">
              <el-input v-model.number="scope.row.deliverNum" oninput="value=value.replace(/[^\d]/g,'')" @focus="onfoucs(scope)" @blur="blurUsername(scope)" />
            </template>
          </el-table-column>
</el-table>

js方法定义：

// 手动单选（订单）
    itemHandleSelectionChange(selection, row) { //selection为当前所选数据集合，row为当前选中行数据
      const selected = selection.length && selection.indexOf(row) !== -1
      if (selected === true) { //这里只需判断是否勾选，进行相应赋值操作即可
        row.deliverNum = row.unShippedNumTemp 
      } else {
        row.deliverNum = 0
      }
    },
    // 手动全选（订单）
    itemHandleSelectionAll(selection) {


### ajax
1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

![ajax.PNG](https://img-blog.csdnimg.cn/img_convert/c49f2eccbbb64a72d6e0ccd15d99d43b.webp?x-oss-process=image/format,png)

![前12.PNG](https://img-blog.csdnimg.cn/img_convert/21c995d89f333a16dec7dd6c551afb00.webp?x-oss-process=image/format,png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**