二、使用步骤
1.引入库
代码如下(示例):
<avue-crud
:option="ladderCarOption"
:table-loading="loading"
ref="ladderCarForm"
@row-dblclick="handleRowDBLClick1"
>
<template slot="price" slot-scope="scope">
<div v-if="row1 == scope.row.$index">
<el-input
placeholder="请输入收费标准(元)"
v-model="scope.row.price"
oninput="if(isNaN(value)) { value=value.replace(value,'')} if(value.length > 10) {value=value.slice(0,10)} if(value < 0) {value=value.replace(value,'')} if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
@blur="updateData(scope.row.price, scope.row.$index, scope.row)"
v-focus
></el-input>
</div>
<div v-else>
{{ scope.row.price }}
</div>
</template>
</avue-crud>
2.读入数据
代码如下(示例):
data(){
row1 :-1,
a:'',
tmpRow :{},
},
methods:{
handleRowDBLClick1(row, event, column) {
this.tmpRow = {}
console.log(this.row, row, row.$index, column)
this.row1 = row.$index
this.tmpRow = row
this.tmpRow.id = row.$index
this.a = this.ladderCarData[row.$index].price
},
updateData(value, index, row) {
console.log(value, this.a, '----')
this.$confirm('请确认是否更改收费标准', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.ladderCarData[index].price = value
this.row1 = -1
})
.catch(() => {
console.log('00000000', this.tmpRow.price)
this.row1 = -1
this.ladderCarData[index].price = this.a
})
},
},