vxe-table|vxe-table在vue中的使用
1、vxe-table使用
editActivedEvent：编辑表格禁用状态
getCode：表格点击方法
//引入编码组件
import codeForm from '@/components/viewComponents/codeForm'
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]:rowarguments[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
}
【vxe-table|vxe-table在vue中的使用】3、编码组件
根据vxe-table表格中数量来显示编码组件中的表格数量，然后input框中可以复制编码，英文状态下‘，’分隔到表格中
文章图片
-icon icon-class="delete" @click.native="deleteRow(scope.row)"/>
>
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'
})
}
}
}
}
="scss">
@import "@/styles/form.scss";
.prompt_text{
font-size: 12px;
color: red;
line-height: 20px ;
}
推荐阅读
- 你到家了吗
- 闲杂“细雨”
- 杜月笙的口才
- 赢在人生六项精进二阶Day3复盘
- 祖母走了
- 樱花雨
- 眼观耳听美食的日子
- vue-cli|vue-cli 3.x vue.config.js 配置
- “成长”读书社群招募
- 眉头开了