Vue中Vxe-tabele中的vxe-grid用法

例子：工具栏 当前行可编辑，连接，转态图标

<template>
  <div class="app-container">

    <!-- 筛选条件查询start -->

    <el-dialog title="筛选" class="page-dialog" :visible.sync="isFilter" width="800px" append-to-body v-dialogDrag>

      <el-row class="tip">

        <i></i>

        <label class="txt">筛选条件</label>

      </el-row>

      <el-form ref="form" :inline="true" label-width="auto">

        <el-col :span="12">

          <el-form-item label="报价单号" prop="quotationNo">

            <el-input v-model="queryParams.quotationNo" placeholder="报价单号" clearable />

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="客户" prop="customNo">

            <el-select v-model="queryParams.customNo" placeholder="请选择" clearable style="width: 120px" @change="selectCustomer">

              <el-option v-for="item in customList" :key="item.customNo" :label="item.customNo" :value="item">

              </el-option>

            </el-select>

            <el-input style="width:100px;" v-model="queryParams.customerName" placeholder="" clearable />

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="登记日" prop="registrationDate">

            <el-date-picker v-model="queryParams.registrationDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" clearable="">

            </el-date-picker>

          </el-form-item>

        </el-col>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>

        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>

      </div>

    </el-dialog>

    <!-- 筛选条件查询end -->

    <el-row ref="tableList">
      <vxe-grid ref="xGrid" id="dataTable" :columns="tableColumn" :data="tableData" :toolbar-config="tableToolbar" :height="tableHeight" :loading="loading" :edit-rules="{
        quotedAmount: [
          { required: true, message: '不能为空' },
          { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' },
        ]
      }" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" :seq-config="{
          startIndex:
            (queryParams.pager.pageNumber - 1) * queryParams.pager.pageSize,
        }" @toolbar-button-click="toolbarButtonClickEvent" @toolbar-tool-click="toolbarToolClickEvent" :cell-class-name="cellClassName">
        <template #quotedAmount_edit="{ row }">
          <vxe-input v-model="row.quotedAmount"></vxe-input>
        </template>
        <template #status_show="{ row }">
          <span :class="'status-tag '+ (row.status =='1'?'div-info':'div-warning')">{{row.statusName}}</span>
        </template>
        <template #pager>
          <vxe-pager :current-page.sync="queryParams.pager.pageNumber" :page-size.sync="queryParams.pager.pageSize" :total="queryParams.pager.total" @page-change="handlePageChange">
          </vxe-pager>
        </template>
      </vxe-grid>
    </el-row>

  </div>
</template>

<script>

import P0101QuoteEdit from "@/views/m01order/P0101QuoteEdit";

export default {

  name: "P0102QuoteList", 

　data() {
    return { 

      // 查询参数
      queryParams: {
        pager: {
          pageNumber: 1,
          pageSize: 50,
          pageSizes: [50, 100]
        },
        quotationNo: null,
        customNo: null,
        customerName: null,
        registrationDate: null
      },


      customList: [],



      tableData: [],
      loading: false,
      tableHeight: null, // 表格高度


      isEdit: false,
      popMode: "",



      tableToolbar: {
        buttons: [
          {
            code: "myInsert",
            name: "新报价",
            icon: "fa fa-plus",
            status: "primary"
          },
          {
            code: "myEdit",
            name: "编辑",
            icon: "fa fa-pencil-square-o"
          },
          {
            code: "myCancel",
            name: "取消",
            icon: "fa fa-ban"
          },
          {
            code: "myLunch",
            name: "发起询价",
            icon: "fa fa-bars"
          },
          {
            code: "returnOrder",
            name: "转订单",
            icon: "fa fa-retweet"
          },
          {
            code: "print",
            name: "打印并报价",
            icon: "fa fa-print"
          },
          {



          }
        ],
        refresh: true,
        export: true,
        custom: true
      },
      tableColumn: [
        {
          type: "checkbox",
          width: 30,
          fixed: "left",
          align: "center",
          sortable: true
        },
        {
          field: "quotationNo",
          title: "报价单号",
          showOverflow: true,
          width: 120,
          align: "center",
          sortable: true,
          cellRender: {
            name: "VXETabelCellLink",
            events: { click: this.linkEvent }
          }
        },
        {
          field: "customerName",
          title: "客户名称",
          showOverflow: true,
          width: 200
        },
        {
          field: "ship",
          title: "船名",
          showOverflow: true,
          width: 80,
          align: "left"
        },
        {
          field: "port",
          title: "港口",
          showOverflow: true,
          width: 80,
          align: "center"
        },
        {
          field: "goodNameCn",
          title: "联系人",
          showOverflow: true,
          width: 100,
          align: "center"
        },
        {
          field: "quotedAmount",
          title: "报价金额",
          showOverflow: true,
          width: 100,
          align: "right",
          formatter: "myAmount",
          editRender: { autofocus: ".vxe-input--inner" },
          slots: { edit: "quotedAmount_edit" }
        },
        {
          field: "status",
          title: "状态",
          showOverflow: true,
          width: 100,
          align: "center",
          slots: { default: "status_show" }
        },
        {
          field: "registrant",
          title: "登记人",
          showOverflow: true,
          width: 100,
          align: "center"
        },
        {
          field: "registrationTime",
          title: "登记时间",
          showOverflow: true,
          width: 100,
          align: "center"
        }
      ],
      quoteStatus: [],



      isFilter: false
    };
  },
  created() {
    // 客户请求
    this.request({
      url: "/custom/customList",
      method: "post",
      data: {}
    }).then((res) => {
      this.customList = res.data;
    });
    // 报价单状态字典请求
    this.request({
      url: "/quote/quoteStatus",
      method: "post",
      data: {}
    }).then((res) => {
      this.quoteStatus = res.data;
    });



    this.loadData();
  },
  methods: {
    // 下拉框选择事件
    selectCustomer(e) {
      this.queryParams.customerName = e.customName;
    },



    // 筛选条件
    showFilter() {
      this.isFilter = true;
    },



    loadData() {
      this.request({
        url: "/quotation/quoteList",
        method: "post",
        data: {}
      }).then((res) => {
        this.tableData = res.data;
        this.queryParams.pager.total = res.total;
      });
    },
    toolbarButtonClickEvent({ code }) {
      const $grid = this.$refs.xGrid;



      // isEdit
      switch (code) {
        case "myInsert":
          this.$router.push({
            path: "/m01order/quoteEdit",
            query: { mode: "create" }
          });
          break;
        case "myEdit":
          this.$router.push({
            path: "/m01order/quoteEdit",
            query: { mode: "edit", id: "" }
          });
          break;
        case "myCancel":
          break;
        case "myLunch":
          break;
        case "returnOrder":
          break;
        case "returnOrder":
          break;
      }
    },
    toolbarToolClickEvent({ code }) {
      const $grid = this.$refs.xGrid;
      switch (code) {
        case "myPrint":
          $grid.print();
          break;
      }
    },
    linkEvent({ row }) {
      this.popMode = "view";
      this.isEdit = true;
    },
    // 分页
    searchEvent() {
      this.queryParams.pager.pageNumber = 1;
      this.loadData();
    },
    handlePageChange({ currentPage, pageSize }) {
      this.queryParams.pager.pageNumber = currentPage;
      this.queryParams.pager.pageSize = pageSize;
      this.loadData();
    },
    handleQuery() {
      this.loadData();
    },
    resetQuery() {
      this.queryParams = {
        pager: {
          pageNumber: 1,
          pageSize: 50,
          pageSizes: [50, 100]
        },
        quotationNo: null,
        customNo: null,
        customerName: null,
        registrationDate: null
      };
    },
    quoteGoodsList() {
      this.$router.push({
        path: "/m01order/quoteGoodsList",
        query: {}
      });
    },
    // 给列加样式
    cellClassName({ row, rowIndex, column, columnIndex }) {
      // if (
      //   column.property === "quoteGroup" ||
      //   column.property === "customSpecs" ||
      //   column.property === "specs"
      // ) {
      //   return "col-geekblue";
      // }
      // if (column.property === "quotationNo") {
      //   return "col-orange";
      // }
    },
    // 表格高度
    getHeight() {
      this.$nextTick(() => {
        this.tableHeight =
          window.innerHeight - this.$refs.searchInfo.$el.offsetHeight - 65; // 45像素title，20像素footer
      });
    }
  },
  beforeMount() {
    // 滚动条的获取
    window.addEventListener("resize", this.getHeight);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getHeight);
  },
  mounted() {
    // 页面渲染完成后的回调
    this.getHeight();
  }
 
};

　　

 

 

 

 

 

参考：https://vxetable.cn/#/grid/api
1. border 边框
2. resizable 宽度可调整
3. :columns="列信息（对应data里的列数据）"
4. :toolbar-config="表格上边的新增，删除等操作（对应data里设置信息）"
5. size="small/medium/mini"  按钮尺寸，上面工具会继承
6. :data="tableData" 表格数据
7. :custom-config="{storage:true} 自定义列配置项 是否启用 localStorage 本地保存，会将列8. 操作状态保留在本地（需要有 id）
9. :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" 可编辑配置项 trigger
触发方式; mode 编辑模式(行/列）;showStatus 只对 keep-source 开启有效，是否显示单元格新增与修改状态
10. @toolbar-button-click="toolbarButtonClickEvent" 只对 toolbar.buttons 配置时有效，当左侧按钮被点击时会后触发该事件
11. @toolbar-tool-click="toolbarToolClickEvent" 只对 toolbar.tools 配置时有效，当右侧工具被点击时会后触发该事件
12. :height="tableHeight" tableHeightdata里设置，页面一加载计算出来
13.  :loading="loading" 页面未加载出数据时转圈效果
初始化数据时传入页码和条数
14.  :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}" 分页
配合下面代码使用（放到<vxe-grid>结束标签的前面）：
<template #pager>
        <vxe-pager :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']" :current-page.sync="tablePage.currentPage" :page-size.sync="tablePage.pageSize" :total="tablePage.total" @page-change="handlePageChange">
        </vxe-pager>
      </template>
15. stripe 表格斑马纹

16.  :row-config="{isHover:true}" isHover鼠标滑过是否高亮

17. :edit-rules="{
                  goodNameEn: [
                    { required: true, message: '英文名不能为空' },
                    { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
                  ],
                  count: [
                    { required: true, message: '数量必须填写' }
                  ],
                }"    
正则验证

18. getCheckboxRecords(isFull) 用于 type=checkbox，获取当前已选中的行数据（当前列表，如果 isFull=true 则获取全表已选中的数据）

19. sortable: true 排序

20.  align: 'center' 列居左中右

21. editRender: { autofocus: ".vxe-input--inner" },   点击渲染表单

22.  slots: { edit: "price_edit" },  插槽，名称（点击行出现输入框，结合下面代码使用）

      <template #itemRemark_edit="{ row }">
        <vxe-input v-model="row.itemRemark"></vxe-input>
      </template>

23. @checkbox-change="slectInfo"  复选框选中事件

24.  :cell-class-name="cellClassName"

cellClassName({ row, rowIndex, column, columnIndex }) {
      if (column.property === 'quoteGroup' || column.property === 'customSpecs' || column.property === 'specs') {
        // if (row.sex >= '1') {
        //   return 'col-red'
        // } else if (row.age === 26) {
        //   return 'col-orange'
        // }
        return 'col-geekblue'
      }
      if (column.property === 'goodCode') {
        return 'col-orange'
      }
    },

 

<el-row ref="tableList">

      <vxe-grid ref="xGrid" id="dataTable" :columns="tableColumn" :data="tableData" :toolbar-config="tableToolbar" :height="tableHeight" :loading="loading" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" :seq-config="{

          startIndex:

            (queryParams.pager.pageNumber - 1) * queryParams.pager.pageSize,

        }" @toolbar-button-click="toolbarButtonClickEvent" @toolbar-tool-click="toolbarToolClickEvent" :cell-class-name="cellClassName">

        <template #quotedAmount_edit="{ row }">

          <vxe-input v-model="row.quotedAmount"></vxe-input>

        </template>

        <template #status_show="{ row }">

          <span :class="'status-tag '+ (row.status =='1'?'div-info':'div-warning')">{{row.statusName}}</span>

        </template>

        <template #pager>

          <vxe-pager :current-page.sync="queryParams.pager.pageNumber" :page-size.sync="queryParams.pager.pageSize" :total="queryParams.pager.total" @page-change="handlePageChange">

          </vxe-pager>

        </template>

      </vxe-grid>

    </el-row>