vxe-table简单使用 vue vxe-table vue整合vxe-table vue2 vxe-table 简单使用

阅读本书更多章节>>>>

vxe-table简单使用 vue vxe-table vue整合vxe-table vue2 vxe-table 简单使用

安装vxe-table引用使用

安装vxe-table

vue2稳定版本
vue3稳定版本

npm install xe-utils vxe-table@legacy

安装 vxe-table 依赖的插件

npm i xe-utils

引用

我这边是全局引入，可以根据自己情况按需引入
main.js

      import Vue from 'vue'      import VXETable from 'vxe-table'      import 'vxe-table/lib/style.css'      Vue.use(VXETable)      // 给 vue 实例挂载内部对象，例如：      // Vue.prototype.$XModal = VXETable.modal      // Vue.prototype.$XPrint = VXETable.print      // Vue.prototype.$XSaveFile = VXETable.saveFile      // Vue.prototype.$XReadFile = VXETable.readFile

使用

我这边使用的 demo 用到了 虚拟滚动,列筛选，自定义列内容 ，可直接全复制

<!-- 页面 --><template> <vxe-button @click="clearFilter">清除所有的筛选条件</vxe-button>       <!--    表格-->      <div class="main-table-div">        <vxe-table          ref="xTable1"          size="mini"          border          max-height="800"          :row-config="{ isHover: true, height: 60 }"          :column-config="{ resizable: true }"          :sort-config="{ trigger: 'cell' }"          :data="tableData"          align="center"          show-overflow          :scroll-x="{gt: 30}"          :scroll-y="{gt: 300}"          :filter-config="{remote: true}"          @filter-change="filterChangeEvent"        >          <vxe-column title="机种名称" field="machineTypeName" width="200" :filters="[{ data: '' }]" :filter-method="filterMethod">            <template #filter="{ $panel, column }">            <!-- 官网给的示例是遍历  filters 属性值数组 ，但是一般搜索只有一个输入框，不需要遍历，尽量减少一点性能消耗，我这边使用固定数组第一个元素-->            <!--  <input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="$panel.changeOption($event, !!option.data, option)"> -->              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">            </template>          </vxe-column>          <vxe-column title="辅料名称" field="auxiliaryMaterialName" width="200" :filters="[{ data: '' }]" :filter-method="filterMethod">            <template #filter="{ $panel, column }">              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">            </template>          </vxe-column>          <vxe-column title="品牌" field="brand" width="120" :filters="[{ data: '' }]" :filter-method="filterMethod">            <template #filter="{ $panel, column }">              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">            </template>          </vxe-column>          <vxe-column title="规格型号" field="specification" width="150" :filters="[{ data: '' }]" :filter-method="filterMethod">            <template #filter="{ $panel, column }">              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">            </template>          </vxe-column>          <vxe-column title="封装用量(ml/g)" field="packageAmount" width="130" :filters="[{ data: '' }]" :filter-method="filterMethod">            <template #filter="{ $panel, column }">              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">            </template>          </vxe-column>          <vxe-column title="料号" field="materialNumber" width="150" :filters="[{ data: '' }]" :filter-method="filterMethod">            <template #filter="{ $panel, column }">              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">            </template>          </vxe-column>          <vxe-column title="用量(ml/g)" field="dosage" width="120" :filters="[{ data: '' }]" :filter-method="filterMethod">            <template #filter="{ $panel, column }">              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">            </template>          </vxe-column>          <vxe-column title="使用位置" field="usePosition" width="120" :filters="[{ data: '' }]" :filter-method="filterMethod">            <template #filter="{ $panel, column }">              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">            </template>          </vxe-column>          <vxe-column title="其他说明" field="doc" width="120" show-header-overflow show-overflow="title" show-footer-overflow />          <vxe-column title="创建时间" field="addTime" width="180" />          <vxe-column title="创建人" field="addUserName" width="180" :filters="[{ data: '' }]" :filter-method="filterMethod">            <template #filter="{ $panel, column }">              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">            </template>          </vxe-column>          <vxe-column title="最后修改时间" field="updateTime" width="180" />          <vxe-column title="最后修改人" field="updateUserName" width="180" :filters="[{ data: '' }]" :filter-method="filterMethod">            <template #filter="{ $panel, column }">              <input v-model="column.filters[0].data" type="type" @input="$panel.changeOption($event, !!column.filters[0].data, column.filters[0])">            </template>          </vxe-column>          <vxe-column title="操作" width="200" fixed="right">            <template #default="{ row, rowIndex }">              <div>                <el-button size="small" type="text" @click="showChange(row)">修改</el-button>                <el-button size="small" type="text" @click="deleteById(row, rowIndex)">删除</el-button>              </div>            </template>          </vxe-column>        </vxe-table>      </div></template><script>export default {  name: 'Index',  components: {},  props: [],  data() {    return {          tableData: [ {                "id": 1006,                "machineTypeName": "Cheng Fat",                "auxiliaryMaterialName": "Cheng Fat",                "brand": "aeaVNGZ7An",                "specification": "IhABS5QBlX",                "packageAmount": "14LBJIvbgZ",                "materialNumber": "Ik8mzrfSWg",                "dosage": "4FOZcY3KEF",                "usePosition": "DWI5RHkBIY",                "doc": "nT65qhLkvI",                "addTime": "2017-09-10 00:22:20",                "addUserName": "Cheng Fat",                "updateTime": "2021-04-16 15:04:40",                "updateUserName": "2005-09-24"            },            {                "id": 1005,                "machineTypeName": "Yuen Tsz Hin",                "auxiliaryMaterialName": "Yuen Tsz Hin",                "brand": "e7fPgpqElq",                "specification": "l57klAlUd4",                "packageAmount": "6Y4e7xcfWg",                "materialNumber": "2FOmQSMC8H",                "dosage": "TfdbMdn10B",                "usePosition": "vFVoDlRbYI",                "doc": "6sArmCG4oP",                "addTime": "2002-08-12 05:47:08",                "addUserName": "Yuen Tsz Hin",                "updateTime": "2009-09-21 22:40:57",                "updateUserName": "2001-04-10"            }],      search: {        machineTypeName: '',        auxiliaryMaterialName: '',        brand: '',        specification: '',        packageAmount: '',        materialNumber: '',        dosage: '',        usePosition: '',        addUserName: '',        updateUserName: ''      }    }  },  computed: {},  watch: {},  beforeMount() { },  mounted() { },  created() {  },  activated() {  },  methods: {    /**     *  当筛选条件发生变化时会触发该事件,api: https://vxetable.cn/v3/#/table/api?filterName=filter-change     * @param {*} column 当前筛选的列属性     * @param {*} property 当前筛选的列名称     * @param {*} values 不知道，忽略     * @param {*} datas 当前表格所有列的筛选数据值列表     * @param {*} filterList 当前表格所有列的筛选数据列表，带列属性和值     * @param {*} $event 事件     */    filterChangeEvent({ column, property, values, datas, filterList, $event }) {      console.info('列筛选')      // console.info('column', column)      // console.info('property', property)      // console.info('values', values)      // console.info('datas', datas)      console.info('filterList', filterList)      // console.info('$event', $event)            // 先清空之前的搜索对象信息      this.search = {        machineTypeName: '',        auxiliaryMaterialName: '',        brand: '',        specification: '',        packageAmount: '',        materialNumber: '',        dosage: '',        usePosition: '',        addUserName: '',        updateUserName: ''      }      // 遍历当前表所有的筛选数据，赋值给搜索对象      filterList.forEach(item => {        // 将当前筛选的列条件数据赋值给 查询对象        console.info(item)        // item.property 当前筛选条件的列名称        // item.datas[0] 当前筛选条件的列值 因为 每列的 filters 数组数据 只有一个元素，固定0        this.search[item.property] = item.datas[0]      })      console.info('查询参数', this.search)      // 将参数传递到后台进行查询    },    // 表格单个列筛选，这个筛选的是 当前表数据，不使用这个    filterMethod({ value, row, column }) {    },        // 清空表格所有查询条件    clearFilter() {      this.$refs.xTable1.clearFilter()      // 清空查询对象      this.search = {        machineTypeName: '',        auxiliaryMaterialName: '',        brand: '',        specification: '',        packageAmount: '',        materialNumber: '',        dosage: '',        usePosition: '',        addUserName: '',        updateUserName: ''      }      // 重新请求服务端查询          }        // 删除    deleteById(row, index) {      console.info(row, index)    },    // 打开修改 弹出框    showChange(row) {      console.info(row)    }  }}</script><style lang="scss" scoped></style>

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-03-27/149770.html，文章来源：网络cs，作者：亙句，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！