vxe-table在vue中的使用

最新推荐文章于 2024-09-20 16:59:10 发布

qdcxy0

最新推荐文章于 2024-09-20 16:59:10 发布

阅读量8.9k

点赞数 3

分类专栏： vxe-table vue

本文链接：https://blog.csdn.net/xx_ll_/article/details/105261972

版权

vue 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

vxe-table

5 篇文章 1 订阅

订阅专栏

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>