vxe-table在vue中的使用
1、vxe-table使用
editActivedEvent：编辑表格禁用状态
getCode：表格点击方法
//引入编码组件
import codeForm from '@/components/viewComponents/codeForm'
<!-- 编码弹出框组件 -->
<codeForm ref="cform" :codes-no="codesNo" :row="row" :count="count" @getCodesNo="getCodesNo"/>
<vxe-table
ref="detailTable"
:data="form.list"
:update-data="number"
:edit-config="{trigger: 'click', mode: 'cell'}"
resizable
show-overflow
height="400"
@edit-actived="editActivedEvent"
@cell-click="getCode">
<vxe-table-column :edit-render="{name: 'input', attrs: {disabled: true}}" min-width="180" field="batchNo" title="编号"/>
<vxe-table-column :edit-render="{name: 'input', attrs: {disabled: true}}" min-width="150" field="number" title="数量" />
<vxe-table-column :edit-render="{name: 'input', attrs: {disabled: true}}" min-width="150" field="code" title="编码"/>
</vxe-table>
2、方法使用
// 计算属性
watch: {
// 数量验证
qty() {
const reg = /^(\+)?\d+(\.\d+)?$/
for (let i = 0; i < this.form.list.length - 1; i++) {
const flag = reg.test(this.form.list[i].number)
if (!flag) {
this.$message({
showClose: true,
message: '数量请输入有效数',
type: 'warning'
})
// 判断后不符合正则要求，则输入框中数据赋值0
this.form.list[i].number= null
}
}
}
},
// 根据代码和表单状态 来控制单元格的禁用状态
editActivedEvent({ row }) {
const dTable = this.$refs.detailTable
const codedColumn = dTable.getColumnByField('code') // 编码
const batchColum = dTable.getColumnByField('batchNo') // 编号
if (row.code && this.form.dealstatus === 0) {
// ----- 需要根据编码管理判断时放开注释 步骤4 是否编码管理 ------------
// if (row.material.isCodeManage && this.addCodeManage) {
// codedColumn.editRender.attrs.disabled = false
// } else {
// codedColumn.editRender.attrs.disabled = true
// }
// 是否编号管理
if (row.isBatchNumberManage) {
batchColum.editRender.attrs.disabled = false
} else {
batchColum.editRender.attrs.disabled = true
}
} else {
if (row.material.isCodeManage && this.addCodeManage) {
codedColumn.editRender.attrs.disabled = false
} else {
codedColumn.editRender.attrs.disabled = true
}
codedColumn.editRender.attrs.disabled = true // 物料编码
batchColum.editRender.attrs.disabled = true // 编号
}
},
getCode() {
const _this = this
if (arguments[0].column.title === '编码' && arguments[0].row.isCodeManage ) {
_this.row = arguments[0].row // 用于标记当前行
_this.count = Number(arguments[0].row.number)
let arr = []
arr = arguments[0].row.code.split(',')
arr.length = Number(arguments[0].row.number)
if (arguments[0].row.code) {
_this.codesNo = arr.join(',')
_this.$refs.cform.code= arr.join(',')
} else {
_this.codesNo = arguments[0].row.code
_this.$refs.cform.code= arguments[0].row.code
}
_this.$refs.cform.form = {
codeArr: []
}
console.log(this.$refs.cform, '222')
if (_this.count > 0) {
_this.$refs.cform.dialog = true
} else {
_this.$message({
message: '请输入数量',
type: 'warning'
})
}
}
if (arguments[0].column.title === '编码' && !arguments[0].row.isCodeManage ) {
_this.$message({
message: '不是编码管理，不需要输入编码',
type: 'warning'
})
}
if (arguments[0].column.title === '编号' && !arguments[0].row.isBatchNumberManage) {
_this.$message({
message: '不是编号管理，不需要输入编号',
type: 'warning'
})
}
},
//获取编码组件返回值
getCodesNo() {
//arguments[1]:row arguments[0]:code
const index = this.form.list.indexOf(arguments[1])
let str = ''
for (let i = 0, len = arguments[0].codeArr.length; i < len; i++) {
str += arguments[0].codeArr[i].code + ','
}
str = str.substring(0, str.length - 1)
this.form.list[index].code = str
}
3、编码组件
根据vxe-table表格中数量来显示编码组件中的表格数量，然后input框中可以复制编码，英文状态下‘，’分隔到表格中
<template>
<el-dialog
:append-to-body="true"
:close-on-click-modal="false"
:before-close="cancel"
:visible.sync="dialog"
title="编辑编码"
center
width="350px"
style="margin-top:-10vh;"
@open="initForm">
<div class="button-row">
<template >
<el-popover
v-if="code.split(',').length !== count"
v-model="visible"
placement="top"
width="180">
<p >完整编码与表格对应编码不对应，是否确认按表格对应编码提交保存？</p>
<div style="text-align: right; margin: 0">
<el-button
size="mini"
type="text"
@click="visible = false">取消</el-button>
<el-button
type="primary"
size="mini"
@click="doCodeSubmit">确定</el-button>
</div>
<el-button slot="reference" size="mini" type="success">保存</el-button>
</el-popover>
<el-button v-else size="mini" type="success" @click.native="doCodeSubmit">保存</el-button>
</template>
<template>
<el-button type="text" @click.native="cancel">关闭</el-button>
</template>
</div>
<el-form
ref="cform"
:model="form"
size="mini">
<el-row>
<el-col >
<el-form-item label="编码:">
<el-input v-model="code" style="width: 214px;" />
<div v-if="isComma!==-1" class="prompt_text">请使用英文状态下逗号分隔</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<template>
<vxe-table
ref="codeTable"
:update-data="codeArr"
:data = "form.codeArr"
:edit-config="{trigger: 'click', mode: 'cell'}"
show-overflow
max-height="200"
highlight-hover-row>
<vxe-table-column name="icon" width="60" title="删除">
<template slot-scope="scope" >
<svg-icon icon-class="delete" @click.native="deleteRow(scope.row)"/>
</template>
</vxe-table-column>
<vxe-table-column :edit-render="{name: 'input', attrs: {disabled: false}}" field="code" min-width="100" title="编码"/>
</vxe-table>
</template>
</el-row>
</el-form>
</el-dialog>
</template>
<script>
export default {
props: {
count: {
type: Number,
default: () => 1
},
row: {
type: Object,
default: () => {}
},
codesNo: {
type: String,
default: () => null
}
},
data() {
return {
visible: false,
dialog: false,
form: {
codeArr: [
{
code: ''
}
]
},
code: '',
isComma: -1,
rules: {}
}
},
// 计算属性
computed: {
codeArr() {
console.log('计算属性编码数组')
let str = ''
for (let i = 0; i < this.form.codeArr.length; i++) {
str += this.form.codeArr[i].code + ','
}
str = str.substring(0, str.length - 1)
return str
}
},
watch: {
materialCoded() {
const codeStr = this.code+ ','
const arr = codeStr.split(',')
this.isComma = codeStr.indexOf('，')
console.log(this.code, '编码改变', arr)
for (let i = 0, len = this.form.codeArr.length; i < len; i++) {
const obj = { code: '' }
obj.code = arr[i]
this.form.codeArr[i].code = arr[i]
}
}
},
methods: {
initForm() {
this.getCode()
},
insertEvent() {
this.form.codeArr.push({
code: ''
})
},
resetForm() {
this.dialog = false
this.$refs['cform'].resetFields()
this.form = {
codeArr: []
}
},
cancel() {
this.$parent.isCodeForm = false
this.resetForm()
},
//删除方法 未使用
deleteRow(data) {
console.log(data, 'shuju')
},
getCode() {
console.log(this.code, '传递过来的code')
if (this.code) {
const codeStr = this.code+ ','
const arr = codeStr.split(',')
for (let i = 0, len = arr.length; i < len - 1; i++) {
const obj = { code: '' }
obj.code = arr[i]
this.form.codeArr[i] = obj
}
} else {
for (let i = 0; i < this.count; i++) {
this.insertEvent()
}
}
},
doCodeSubmit() {
this.visible = false
let isSubmit = true
for (let i = 0; i < this.count; i++) {
if (this.form.codeArr[i].code === '') {
isSubmit = false
}
}
if (isSubmit) {
this.$emit('getCodesNo', this.form, this.row)
this.dialog = false
this.form = {
codeArr: []
}
} else {
this.$message({
message: '请填写完编码',
type: 'warning'
})
}
}
}
}
</script>
<style lang="scss">
@import "@/styles/form.scss";
.prompt_text{
font-size: 12px;
color: red;
line-height: 20px ;
}
</style>