精华内容
下载资源
问答
  • vxe-grid
    万次阅读
    2021-01-14 19:49:20

    vxe-grid的使用

    渲染表格的话,不可能所有的数据都是靠自己手动生成的,需要通过v-for渲染出来,

    v-for循环生成列

    <template>
      <div>
        <vxe-table
              border="inner"
              highlight-hover-row
              highlight-current-row
              ref="xTable"
              height="300"
              :data="tableData">
              <vxe-table-column v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>
            </vxe-table>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          allAlign: null,
          tableColumn: [
            { type: 'seq', width: 60, fixed: null },
            { type: 'checkbox', width: 50, fixed: null },
            { field: 'name', title: 'Name', width: 200 },
            { field: 'nickname', title: 'Nickname', width: 300 },
            { field: 'sex', title: 'Sex', width: 200 },
            { field: 'role', title: 'Role', width: 200 },
            { field: 'address', title: 'Address', width: 300, showOverflow: true }
          ],
          tableData: [
            { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
            { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
            { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
            { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women ', age: 23, address: 'vxe-table 从入门到放弃' },
            { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women ', age: 30, address: 'Shanghai' },
            { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women ', age: 21, address: 'vxe-table 从入门到放弃' },
            { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man ', age: 29, address: 'vxe-table 从入门到放弃' },
            { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man ', age: 35, address: 'vxe-table 从入门到放弃' }
          ]
        }
      }
    }
    </script>
    
    

    如果是从后端获取数据的话,推荐使用vxe-grid来渲染表格
    在这里插入图片描述

    vxe-grid生成表格

    <template>
      <div>
        <vxe-grid
          border
          resizable
          show-footer
          ref="xGrid"
          :footer-method="footerMethod"
          height="400"
          :tree-config="{lazy: true, children: 'children', hasChild: 'hasChild', loadMethod: loadChildrenMethod}"
          :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
          :columns="columns"
          :data="data"
        ></vxe-grid>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          columns: [
            { type: 'seq', width: 60, fixed: 'left' },
            // { type: 'checkbox', title: 'ID', width: 140, fixed: 'left', treeNode: true },
            // eslint-disable-next-line no-undef
            { field: 'name', title: 'Name', editRender: { name: 'NameCon', event }, treeNode: true },
            { field: 'nickname', title: 'Nickname' },
            {
              field: 'role',
              title: 'Role',
              type: 'text',
              cellRender: { name: 'input' }
            },
            {
              field: 'sex',
              title: 'Sex',
              cellRender: { name: 'DICT', props: { code: 'SEX_LIST' } }
            },
            { field: 'describe', title: 'Describe', showOverflow: true }
          ],
          data: []
        }
      },
      created () {
        this.findList()
      },
      methods: {
        changeData () {
          const xTable = this.$refs.xGrid.tableData
          console.log(xTable)
          for (let i = 0; i < xTable.length; i++) {
            // xTable[i].name = '{"name":"aaaaa"}'
            xTable[i].name = 'name1'
            if (xTable[i].children && xTable[i].children.length) {
              for (let j = 0; j < xTable[i].children.length; j++) {
                // xTable[i].children[j].name = '{"name":"bbbb"}'
                xTable[i].children[j].name = 'bbb'
                // xTable[i].children[j] = []
              }
              // xTable[i].children = []
            }
          }
          // this.$refs.xGrid.clearTreeExpand()
          // this.$refs.xGrid.setTreeExpand(xTable[0], true)
          console.log(xTable)
        },
        footerMethod () {
          console.log(1212)
          return this.footerData
        },
        findList () {
          // const _this = this
          this.data = [
            {
              //         // name: 'name1',
              name: '{"name":"children"}',
              nickname: 'T1',
              role: '前端',
              sex: '1',
              age: 22,
              status: '1',
              describe: 'Address abc123',
              hasChild: true
            },
            {
              name: '{"name":"children"}',
              // name: 'name-children',
              nickname: 'Test1-1',
              role: '去掉',
              sex: '22',
              age: '0',
              status: '2',
              describe: 'Address rttry',
              hasChild: false
            },
            {
              name: '{"name":"children"}',
              // name: 'name-children',
              nickname: 'Test1-2',
              role: '测试',
              sex: '1',
              age: '26',
              status: '3',
              describe: 'Address xxxxx',
              hasChild: true
            }
          ]
          const allColumn = this.columns
          console.log(this.data)
          this.footerData = [
            allColumn.map((column, columnIndex) => {
              if (columnIndex === 0) {
                return '平均'
              }
              return columnIndex
            }),
            allColumn.map((column, columnIndex) => {
              if (columnIndex === 0) {
                return '和值'
              }
              return columnIndex
            })
          ]
        },
        loadChildrenMethod ({ row }) {
          // 模拟后台
          return new Promise(resolve => {
            setTimeout(() => {
              const childs = [
                { name: 'name-children', nickname: 'Test1-1', role: '去掉', sex: '22', age: '0', status: '2', describe: 'Address rttry' },
                { name: 'name-children', nickname: 'Test1-2', role: '测试', sex: '1', age: 26, status: '3', describe: 'Address xxxxx' }
              ]
              const rowChildren = {
                name: row.name, nickname: row.nickname, role: row.role, sex: row.sex, age: row.age
              }
              childs.push(rowChildren)
              resolve(childs)
            }, 300)
          })
        },
        linkEvent ({ row }) {
          console.log(row.name)
        }
      }
    }
    </script>
    <style>
    .progress {
      height: 10px;
      background: #ebebeb;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
      border-radius: 10px;
    }
    .progress > span {
      position: relative;
      float: left;
      margin: 0 -1px;
      min-width: 30px;
      height: 10px;
      line-height: 16px;
      text-align: right;
      background: #cccccc;
      border: 1px solid;
      border-color: #bfbfbf #b3b3b3 #9e9e9e;
      border-radius: 10px;
      background-image: -webkit-linear-gradient(
        top,
        #f0f0f0 0%,
        #dbdbdb 70%,
        #cccccc 100%
      );
      background-image: -moz-linear-gradient(
        top,
        #f0f0f0 0%,
        #dbdbdb 70%,
        #cccccc 100%
      );
      background-image: -o-linear-gradient(
        top,
        #f0f0f0 0%,
        #dbdbdb 70%,
        #cccccc 100%
      );
      background-image: linear-gradient(
        to bottom,
        #f0f0f0 0%,
        #dbdbdb 70%,
        #cccccc 100%
      );
      -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    .progress .orange {
      background: #fe8e01;
      border-color: #fe8e02 #fe8e02 #bf6b02;
      background-image: -webkit-linear-gradient(
        top,
        #feaa41 0%,
        #fe8e02 70%,
        #fe8e01 100%
      );
      background-image: -moz-linear-gradient(
        top,
        #feaa41 0%,
        #fe8e02 70%,
        #fe8e01 100%
      );
      background-image: -o-linear-gradient(
        top,
        #feaa41 0%,
        #fe8e02 70%,
        #fe8e01 100%
      );
      background-image: linear-gradient(
        to bottom,
        #feaa41 0%,
        #fe8e02 70%,
        #fe8e01 100%
      );
    }
    </style>
    
    

    在这里插入图片描述

    更多相关内容
  • vxe-grid加载页面默认表格选中第一行高亮.vue
  • vxe-grid筛选渲染

    千次阅读 2021-12-29 13:46:42
    vxe-grid筛选渲染 表格数据过多时,需要过滤数据 代码: // index.vue <template> <div style="height: 400px"> <vxe-grid ref="xGrid" v-bind="gridOptions"></vxe-grid> </div&...

    vxe-grid筛选渲染

    表格数据过多时,需要过滤数据

    在这里插入图片描述
    代码:

    // index.vue
    <template>
      <div style="height: 400px">
        <vxe-grid ref="xGrid" v-bind="gridOptions"></vxe-grid>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          gridOptions: {
            highlightHoverRow: true,
            autoResize: true,
            height: 'auto',
            border: true,
            loading: false,
            editConfig: {
              trigger: 'dblclick',
              mode: 'cell',
              showStatus: true,
              showIcon: false,
              activeMethod: this.activeCellMethod
            },
            mouseConfig: {
              selected: true,
              area: true,
              extension: true
            },
            columns: [
              { type: 'seq' },
              {
                field: 'name',
                title: 'Name',
                filters: [{ data: '' }],
                filterRender: { name: 'FilterInput' }
              },
              {
                field: 'role',
                title: 'Role',
                editRender: { name: 'RoleCell', events: { click: this.getCellData } },
                filters: [{ data: { vals: [], sVal: '' } }],
                filterRender: {
                  name: 'FilterContent'
                }
              },
              { field: 'sex', title: 'Sex' },
              {
                field: 'age',
                title: '年龄',
                filters: [{ data: { type: 'lt', name: '' } }],
                filterRender: { name: 'FilterComplex' }
              }
            ],
            data: []
          }
        }
      },
      mounted () {
        this.getData().then((data) => {
          this.gridOptions.data = data
        })
      },
      methods: {
        activeCellMethod () {
          return true
        },
        getCellData (params) {
          console.log(params)
        },
        getData () {
          return new Promise((resolve) => {
            const list = [
              { name: 'Test1', role: '前端', sex: '男', age: 13 },
              { name: 'Test2', role: '后端', sex: '男', age: 11 },
              { name: 'Test3', role: '测试', sex: '男', age: 15 },
              { name: 'Test4', role: '设计师', sex: '女', age: 12 },
              { name: 'Test5', role: '前端', sex: '男', age: 13 },
              { name: 'Test6', role: '前端', sex: '男', age: 16 },
              { name: 'Test7', role: '前端', sex: '男', age: 22 }
            ]
            resolve(list)
          })
        }
      }
    }
    </script>
    
    
    // table.js 定义组件
    VXETable.renderer.add('FilterContent', {
      // 不显示底部按钮,使用自定义的按钮
      isFooter: false,
      // 筛选模板
      renderFilter (h, renderOpts, params) {
        return [
          <filter-content params={ params }></filter-content>
        ]
      },
      // 重置数据方法
      filterResetMethod ({ options }) {
        options.forEach(option => {
          option.data = { vals: [], sVal: '' }
        })
      },
      // 筛选数据方法
      filterMethod ({ option, row, column }) {
        const { vals } = option.data
        console.log(vals)
        // eslint-disable-next-line no-undef
        let cellValue = XEUtils.get(row, column.property)
        if (column.property === 'customerItemCode') {
          cellValue = cellValue.customerItemCode || cellValue
        }
        return vals.includes(cellValue)
      }
    })
    // 条件过滤
    VXETable.renderer.add('FilterComplex', {
      // 不显示底部按钮,使用自定义的按钮
      isFooter: false,
      // 筛选模板
      renderFilter (h, renderOpts, params) {
        const { events } = renderOpts
        return [
          <filter-complex params={ params } events={events}></filter-complex>
        ]
      },
      // 重置数据方法
      filterResetMethod ({ options }) {
        // console.log(options)
        options.forEach(option => {
          option.data = { type: 'lt', name: '' }
        })
      },
      // 筛选数据方法
      filterMethod ({ option, row, column }) {
        // console.log(option, row, column)
        const cellValue = parseFloat(XEUtils.get(row, column.property))
        // console.log(cellValue)
        const { name, type } = option.data
        if (!name) {
          return true
        }
        if (type === 'lt') {
          return cellValue < parseInt(name)
        } else if (type === 'eq') {
          return cellValue === parseInt(name)
        } else if (type === 'gt') {
          return cellValue > parseInt(name)
        }
        return false
      }
    })
    VXETable.renderer.add('FilterInput', {
      // 筛选模板
      renderFilter (h, renderOpts, params) {
        // console.log(params)
        return [
          <filter-input params={ params }></filter-input>
        ]
      },
      // 筛选方法
      filterMethod ({ option, row, column }) {
        const { data } = option
        const cellValue = row[column.property]
        if (cellValue) {
          return cellValue.indexOf(data) > -1
        }
        return false
      }
    })
    
    
    // 内置组件 FilterContent.vue
    <template>
      <div class="my-filter-content">
        <div class="my-fc-search">
          <div class="my-fc-search-top">
            <vxe-input v-model="option.data.sVal" placeholder="搜索" @input="searchEvent" suffix-icon="fa fa-search"></vxe-input>
          </div>
          <div class="my-fc-search-content">
            <template v-if="valList.length">
              <ul class="my-fc-search-list my-fc-search-list-head">
                <li class="my-fc-search-item">
                  <vxe-checkbox v-model="isAll" @change="changeAllEvent">全选</vxe-checkbox>
                </li>
              </ul>
              <ul class="my-fc-search-list my-fc-search-list-body">
                <li class="my-fc-search-item" v-for="(item, sIndex) in valList" :key="sIndex">
                  <vxe-checkbox v-model="item.checked">{{ item.value }}</vxe-checkbox>
                </li>
              </ul>
            </template>
            <template v-else>
              <div class="my-fc-search-empty">无匹配项</div>
            </template>
          </div>
        </div>
        <div class="my-fc-footer" style="text-align: right">
          <vxe-button type="text" @click="confirmFilterEvent">筛选</vxe-button>
          <vxe-button style="margin-left: 0" type="text" @click="resetFilterEvent">重置</vxe-button>
        </div>
      </div>
    </template>
    
    <script>
    import XEUtils from 'xe-utils'
    
    export default {
      name: 'FilterContent',
      props: {
        params: Object
      },
      data () {
        return {
          size: 'mini',
          isAll: false,
          option: null,
          colValList: [],
          valList: []
        }
      },
      created () {
        this.load()
      },
      methods: {
        load () {
          const { $table, column } = this.params
          const { fullData } = $table.getTableData()
          const option = column.filters[0]
          const { vals } = option.data
          let colValList = Object.keys(XEUtils.groupBy(fullData, column.property)).map(val => {
            return {
              checked: vals.includes(val),
              value: val
            }
          })
          const columnsArr = []
          console.log(XEUtils.groupBy(fullData, column.property))
          if (column.property === 'customerItemCode') {
            fullData.forEach(item => {
            //   console.log(item['customerItemCode']['customerItemCode'])
              const toValue = item.customerItemCode.customerItemCode
              if (toValue) {
                columnsArr.push({
                  checked: vals.includes(toValue),
                  value: toValue
                })
              }
            })
            if (columnsArr && columnsArr.length) {
              colValList = columnsArr
            }
          }
          console.log(colValList)
          this.option = option
          this.colValList = colValList
          this.valList = colValList
        },
        searchEvent () {
          const { option, colValList } = this
          this.valList = option.data.sVal ? colValList.filter(item => item.value.indexOf(option.data.sVal) > -1) : colValList
        },
        changeAllEvent () {
          const { isAll } = this
          this.valList.forEach(item => {
            item.checked = isAll
          })
        },
        confirmFilterEvent (evnt) {
          const { params, option, valList } = this
          const { data } = option
          const { $panel } = params
          data.vals = valList.filter(item => item.checked).map(item => item.value)
          console.log(this.events)
          $panel.changeOption(evnt, true, option)
          $panel.confirmFilter()
        },
        resetFilterEvent () {
          const { $panel } = this.params
          $panel.resetFilter()
        }
      }
    }
    </script>
    
    <style>
    .my-filter-content {
      padding: 10px;
      user-select: none;
    }
    .my-filter-content .my-fc-search .my-fc-search-top {
      position: relative;
      padding: 5px 0;
    }
    .my-filter-content .my-fc-search .my-fc-search-top > input {
      border: 1px solid #ABABAB;
      padding: 0 20px 0 2px;
      width: 200px;
      height: 22px;
      line-height: 22px;
    }
    .my-filter-content .my-fc-search .my-fc-search-content {
      padding: 2px 10px;
    }
    .my-filter-content .my-fc-search-empty {
      text-align: center;
      padding: 20px 0;
    }
    .my-filter-content .my-fc-search-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .my-filter-content .my-fc-search-list-body {
      overflow: auto;
      height: 120px;
    }
    .my-filter-content .my-fc-search-list .my-fc-search-item {
      padding: 2px 0;
      display: block;
    }
    .my-filter-content .my-fc-footer {
      text-align: right;
      padding-top: 10px;
    }
    .my-filter-content .my-fc-footer button {
      /* padding: 0 15px; */
      /* margin-left: 15px; */
    }
    .my-fc-search-content ul {
      text-align: left;
    }
    </style>
    
    

    条件搜索过滤
    在这里插入图片描述

    // FilterInput.vue
    <template>
      <div class="my-filter-input" style="text-align: right">
        <vxe-input type="text" v-model="option.data" placeholder="支持回车筛选" @keyup="keyupEvent" @input="changeOptionEvent"></vxe-input>
      </div>
    </template>
    
    <script>
    export default {
      name: 'FilterInput',
      props: {
        params: Object
      },
      data () {
        return {
          column: null,
          option: null
        }
      },
      created () {
        this.load()
      },
      methods: {
        load () {
          const { column } = this.params
          const option = column.filters[0]
          this.column = column
          this.option = option
        },
        changeOptionEvent () {
          // console.log('输入')
          const { params, option } = this
          const { $panel } = params
          const checked = !!option.data
          $panel.changeOption(null, checked, option)
        },
        keyupEvent ({ $event }) {
          const { params } = this
          const { $panel } = params
          if ($event.keyCode === 13) {
            $panel.confirmFilter()
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .my-filter-input {
      padding: 10px;
    }
    </style>
    
    

    文本搜索过滤
    在这里插入图片描述

    // FilterComplex.vue
    <template>
      <div class="my-filter-complex">
        <div class="my-fc-type">
          <vxe-radio v-model="option.data.type" name="fType" label="lt">小于</vxe-radio>
          <vxe-radio v-model="option.data.type" name="fType" label="eq">等于</vxe-radio>
          <vxe-radio v-model="option.data.type" name="fType" label="gt">大于</vxe-radio>
    
        </div>
        <div class="my-fc-name">
          <vxe-input v-model="option.data.name" type="text" placeholder="请输入数量" @input="changeOptionEvent()"></vxe-input>
        </div>
        <div class="my-fc-footer" style="text-align: right">
          <vxe-button :disabled="!option.data.name" type="text" @click="confirmEvent">筛选</vxe-button>
          <vxe-button style="margin-left: 0" type="text" @click="resetEvent">重置</vxe-button>
        </div>
      </div>
    </template>
    
    <script>
    // import XEUtils from 'xe-utils'
    export default {
      name: 'FilterComplex',
      props: {
        params: Object,
        events: Object
      },
      data () {
        return {
          size: 'mini', // 被所有子组件继承 size
          column: null,
          option: null
        }
      },
      created () {
        this.load()
      },
      methods: {
        load () {
          const { column } = this.params
          console.log(this.params)
          const option = column.filters[0]
          this.column = column
          this.option = option
        },
        changeOptionEvent () {
          console.log('输入')
          const { params, option } = this
          const { $panel } = params
          const checked = !!option.data.name
          $panel.changeOption(null, checked, option)
        },
        confirmEvent () {
          console.log(this.params)
          const { $panel, column } = this.params
          console.log(column)
          $panel.confirmFilter()
        },
        resetEvent () {
          // eslint-disable-next-line no-unused-vars
          const { $panel } = this.params
          $panel.resetFilter()
        }
      }
    }
    </script>
    
    <style scoped>
    .my-filter-complex {
      width: 260px;
      padding: 5px 15px 10px 15px;
    }
    .my-filter-complex .my-fc-type {
      padding: 8px 0;
    }
    .my-filter-complex .my-fc-footer {
      text-align: center;
    }
    </style>
    
    

    Number 类型过滤
    在这里插入图片描述

    展开全文
  • vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念: 面向...
  • vxe-table 简体中文|| 一个基于的PC端表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等....
  • vxe-grid单元格渲染

    千次阅读 2021-12-28 10:54:26
    vxe-grid单元格渲染 有时候表格显示的内容不是我们需要的,这个时间可以使用单元格渲染,自定义显示的内容 单元格渲染的使用 // index.vue <template> <div style="height: 400px"> <vxe-grid ...

    vxe-grid单元格渲染

    有时候表格显示的内容不是我们需要的,这个时间可以使用单元格渲染,自定义显示的内容

    单元格渲染的使用

    在这里插入图片描述

    // index.vue
    <template>
      <div style="height: 400px">
        <vxe-grid ref="xGrid" v-bind="gridOptions"></vxe-grid>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          gridOptions: {
            highlightHoverRow: true,
            autoResize: true,
            height: 'auto',
            border: true,
            loading: false,
            columns: [
              { type: 'seq' },
              { field: 'name', title: 'Name' },
              { field: 'role', title: 'Role' },
              { field: 'sex', title: 'Sex' }
            ],
            data: []
          }
        }
      },
      mounted () {
        this.getData().then((data) => {
          this.gridOptions.data = data
        })
      },
      methods: {
        getData () {
          return new Promise((resolve) => {
            const list = [
              { name: 'Test1', role: '前端', sex: '男' },
              { name: 'Test2', role: '后端', sex: '男' },
              { name: 'Test3', role: '测试', sex: '男' },
              { name: 'Test4', role: '设计师', sex: '女' },
              { name: 'Test5', role: '前端', sex: '男' },
              { name: 'Test6', role: '前端', sex: '男' },
              { name: 'Test7', role: '前端', sex: '男' }
            ]
            resolve(list)
          })
        }
      }
    }
    </script>
    
    

    这是根据数组渲染的表格
    在这里插入图片描述
    单元格渲染,这个时候需要将单元格的内容替换为自定义的内容

    // table.js
    // 在main.js 中引用table.js 
    // import './plugins/table'
    import Vue from 'vue'
    import store from '../store'
    import XEUtils from 'xe-utils'
    // eslint-disable-next-line no-unused-vars
    import VXETable, { Input, VXEColumn } from 'vxe-table'
    import 'vxe-table/lib/style.css'
    import VXETablePluginElement from 'vxe-table-plugin-element'
    import 'vxe-table-plugin-element/dist/style.css'
    import RoleCell from './component/RoleCell.vue'
    
    Vue.component(NameCon.name, NameCon)
    Vue.component(FilterContent.name, FilterContent)
    Vue.use(VXETable)
    // Vue.use(VXEColumn)
    VXETable.use(VXETablePluginElement)
    // 创建一个超链接渲染器
    VXETable.renderer.add('MyLink', {
      // 默认显示模板
      renderDefault (h, cellRender, params) {
        // eslint-disable-next-line no-unused-vars
        const { row, column } = params
        return [
          <input class="my-link" value={row[column.property]}>{row[column.property]}</input>
          // <progress value= '70' max= '100' ></progress>
        ]
      }
    })
    VXETable.renderer.add('RoleCell', {
      // 默认显示模板
      renderDefault (h, cellRender, params) {
        // eslint-disable-next-line no-unused-vars
        const { row, column } = params
        return [
          <RoleCell class="my-link" value={row[column.property]}></RoleCell>
          // <progress value= '70' max= '100' ></progress>
        ]
      }
    })
    
    // RoleCell.vue
    <template>
        <div>
            {{value}}
            <span>123</span>
        </div>
    </template>
    <script>
    export default {
      name: 'RoleCell',
      props: {
        value: { type: String }
      },
      data () {
        return {
          message: 'abc'
        }
      }
    }
    </script>
    
    
    // index.vue 在页面上的column引用
    columns: [
              { type: 'seq' },
              { field: 'name', title: 'Name', cellRender: { name: 'MyLink' } },
              { field: 'role', title: 'Role', cellRender: { name: 'RoleCell' } },
              { field: 'sex', title: 'Sex' }
            ]
    

    Name和Role列显示的内容就是我们自定义的内容
    在这里插入图片描述

    展开全文
  • 为您提供vxe-tablevue表格解决方案下载,vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、...
  • vxe-grid可编辑渲染

    千次阅读 2021-12-29 10:37:04
    vxe-grid可编辑渲染 自定义单元格渲染后,需求在自定义的单元格能够编辑单元格的数据,这个时候需要用到edit-render,可编辑渲染,通过点击单元格显示编辑项,修改单元格数据 代码 <template> <div ...

    vxe-grid可编辑渲染

    自定义单元格渲染后,需求在自定义的单元格能够编辑单元格的数据,这个时候需要用到edit-render,可编辑渲染,通过点击单元格显示编辑项,修改单元格数据

    在这里插入图片描述
    代码

    <template>
      <div style="height: 400px">
        <vxe-grid ref="xGrid" v-bind="gridOptions"></vxe-grid>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          gridOptions: {
            highlightHoverRow: true,
            autoResize: true,
            height: 'auto',
            border: true,
            loading: false,
            editConfig: {
              trigger: 'dblclick', // 双击显示
              mode: 'cell',
              showStatus: true,
              showIcon: false,
              activeMethod: this.activeCellMethod
            },
            mouseConfig: {
              selected: true,
              area: true,
              extension: true
            },
            columns: [
              { type: 'seq' },
              { field: 'name', title: 'Name', cellRender: { name: 'MyLink' } },
              { field: 'role', title: 'Role', editRender: { name: 'RoleCell', events: { click: this.getCellData } } },
              { field: 'sex', title: 'Sex' }
            ],
            data: []
          }
        }
      },
      mounted () {
        this.getData().then((data) => {
          this.gridOptions.data = data
        })
      },
      methods: {
        activeCellMethod () {
          return true
        },
        getCellData (params) {
          console.log(params)
        },
        getData () {
          return new Promise((resolve) => {
            const list = [
              { name: 'Test1', role: '前端', sex: '男' },
              { name: 'Test2', role: '后端', sex: '男' },
              { name: 'Test3', role: '测试', sex: '男' },
              { name: 'Test4', role: '设计师', sex: '女' },
              { name: 'Test5', role: '前端', sex: '男' },
              { name: 'Test6', role: '前端', sex: '男' },
              { name: 'Test7', role: '前端', sex: '男' }
            ]
            resolve(list)
          })
        }
      }
    }
    </script>
    
    
    // 修改table.js的编辑组件
    VXETable.renderer.add('RoleCell', {
      autofocus: '.vxe-input--inner',
      // 双击单元格后显示输入框
      renderEdit (h, renderOpts, params) {
        // const { data } = params
        const { row, column } = params
        const { events } = renderOpts
        // console.log(params)
        return [
          <el-input size='small' text='text' v-model={ row[column.property] } onblur={ () => events.click(params) } />
        ]
      },
      // 默认显示模板
      renderCell (h, cellRender, params) {
        // eslint-disable-next-line no-unused-vars
        const { row, column } = params
        // console.log(row, column)
        return [
          <span>{ row[column.property] } </span>
          // <progress value= '70' max= '100' ></progress>
        ]
      }
    })
    

    双击单元格显示输入框,输入数据后,可将数据显示
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vxe-table(vxe-grid)自定义模块:列头

    千次阅读 2021-11-18 11:45:11
    自定义列头模块 文档官网:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install 在列头上,有时候显示的title信息并不能满足我们想要显示的内容,这个时候查看文档...vxe-grid border show-overflow
  • vxe-table vxe-table 和 vxe-grid 有什么区别 说明 table(基础表格) grid(高级表格) 用法 使用标签配置 <vxe-column field=“xx” …/> 使用 JSON 配置:{ field: ‘xx’, … } 动态列 √ 部分 ...
  • 为您提供vxe-tablevue 表格解决方案下载,vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项...
  • vxe-grid 表格 翻页勾选状态存在
  • <template v-for="(e,index) in columnsListData" :slot="e.slots?e.slots.default:''"> <div :key="index"> 这改如何写? div> template>
  • vxe-grid实现相同行合并,

    千次阅读 2021-06-11 14:10:35
    vxe-grid实现相同行合并 在vxe-grid表格内,有时候将一行拆分为多行,实现显示不同的内容,有些数据拆分行中是相同的内容,将相同内容列数据合并行,也有利于区分行之间的关系 // 实现代码 <template> <...
  • 实现效果图如下: <template> <div class="containt animated slideInLeft">...Button type="info" icon='md-arrow-round-back' :loading="model_load" @click="handleOk()" .
  • vxe-grid控件树状展示的性能测试

    千次阅读 2021-03-17 16:05:06
    这里准备将需要大屏展示的表格替换成vxe-gridvxe-gridvxe-table的高级版本,支持动态自定义列)来使用。 gitee地址:https://gitee.com/xuliangzhan_admin/vxe-table 文档地址:...
  • 问题描述: 如下图,使用vxe-table组件时候出现如下显示问题: 问题分析: 首先,项目不是我搭建的,对vxe-table组件的...我们项目中使用的是vxe-grid高级表格,也就是可以通过pager-config属性来设置分页的相关内容。
  • vue监听滚动事件 实现vxe-grid的header顶端显示 1.vxe-grid部分 <vxe-grid :data="specialPriceDetailBeanData" :columns="detailTableColumn" :header-row-class-name="tableHeaderClassName" size="mini" ...
  • vxe-table 宽度问题,v-show 显示隐藏导致列宽错误,解决方法 解决方法(任意一种都可以解决问题) 只需要加上 :auto-resize=“true” 就可以自动重新计算表格...vxe-grid auto-resize ... ></vxe-grid>
  • vxe-table vxe-grid 数据代理分页、自定义返回数据结构 vxe-grid 是一套集成完整功能的数据表格,接下来使用其他一个数据代理功能来完成列表查询。 上线配置 proxy-config,props 属性用于自定义返回的数据字段,...
  • 为您提供vxe-tablevue表格解决方案下载,vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、...
  • 获取过滤后表格内容 // 获取过滤列后的表格数据 this.$refs.xTable1.getTableData() 结果:显示了所有数据和过滤后的数据,不管是单列过滤,还是多列过滤,都是显示当前页面显示的数据
  • 我的表格使用了vxe-grid的数据代理来查询数据,查询的参数是一个组件的props。 因为子组件有一个属性,level_end是通过调用后端接口获取的。需要获取后赋值,使用这个参数去查询表格。 但这里就会有一个执行顺序和...
  • 为您提供vxe-tablevue表格解决方案下载,vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、...
  • 为您提供vxe-tablevue表格解决方案下载,vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、...
  • 为您提供vxe-tablevue表格解决方案下载,vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、...
  • 出现这个问题的原因找了好久才找到,最后综合网上各位大佬的方法解决了 场景:打开第一条数据的编辑的对话框不做任何修改关掉,在打开第二条数据的对话框然后关闭,神奇的事情发生了,表格里第二条数据的某些字段的...
  • 为您提供vxe-tablevue表格解决方案下载,vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 671
精华内容 268
关键字:

vxe-grid

友情链接: stssts.rar