需求:
1. 发货数量默认为0,用户可自行输入;
2. 点击复选框将未发货数动态赋值给发货数,取消复选发货数为0;
3. 点击全选框将每行的未发货数赋值给对应发货数,取消全选发货数为0。
实现步骤:
画重点:
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) {
const selected = selection.length && selection.indexOf(row) !== -1
if (selected === true) {
row.deliverNum = row.unShippedNumTemp
} else {
row.deliverNum = 0
itemHandleSelectionAll(selection) {
console.log(`全选----`, selection)
if (selection.length !== 0) {
selection.map(v => { v.deliverNum = v.unShipped})
this.totalNumer = this.countTotal(selection, 'unShipped')
} else {
this.submitCUOrder()
this.totalNumer = this.countTotal(selection, 'deliverNum')
看效果:
此方法是本人结合官方文档研究出来的,不足之处请指教。
首先,需要码个element的表格。
@selection-change=“handleSelectionChange” 和ref="multipleTable"这两个文档里有说明就不说了。
<template>
<el-table
:header-cell-style="{background:'#666',color:'whit...
vue官网中深入理解响应式原理中有描述:
对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性。例如,对于:
Vue.set(vm.someObject, 'b', 2)
实现代码
<template>
<el-checkbox-group..
input是0为输入框,1为复选框,val是form表单要绑定的值,因为是动态生成的,所以也需要后端给你传过来,因为我做的时候,如果不是后端传过来的,前端再添加val这个键值对的时候会导致form表单你输入的时候一直为空输入不进去,值也存不进去,最好是让后台的发送给你。然后 后端传过来的是数组包对象,form绑定需要绑定一个对象而不是数组,所以此处绑定一个data里定义好的空对象就行了。v-model绑定的是rightList的val,数据比组件生成提前所以正常运行使用无压力了。
有的时候因为需求,需要把一些数据通过输入框或者选择框来进行查询和渲染,这个时候数据多肯定是不能展示出来的,所以需要做一个弹窗,这个弹窗是一个table表格点击选中之后就会把此条数据渲染到指定位置1.@keyup.space.native="sendmessage()"//这行代码是通过空格触发弹窗事件,加到自己的组件即可2.data中定义//弹框4.与表格绑定。......
{eng:'tradetype', name:"交易类型"},
{eng:'ordertype', name:"下单类型"},
{eng:'dealnum', name:"成交数量"},
{eng:'dealprice', name:"成交价"},
{eng:'dealline', name:"成交额"},
{eng:'entrustnum', name:.
height="267px"
:show-header="false"
style="width: 26%; border: 1px solid #dfe6ec; margin: 0 auto; top: 25%"
:default-expand-all="true"
一、关于vue的几个疑惑
<el-table :data="fromList" stripe style="width: 100%">
<el-table-column prop="username" label="姓名" width="180"></el-table-column>
<el-table-column prop="password" label="密码" width="180"> </el-t
使用ElementUI表格模板渲染数据时使用
总体上说明:
当前行数据的获取也会用到插槽,scope相当于一行的数据, scope.row相当于当前行的数据对象