精华内容
下载资源
问答
  • 2022-04-17 18:22:35

    最近遇到的需求,一个表格,需要行内编辑(其实最后还是改为了弹出框编辑),前台使用的是 vue,ui 是 ant,ant....以前没用过,刚用了半个月,反正觉着不太好用,API 写的也不是太清楚。

    然后就是行内编辑这个事儿,我觉得是数据字段比较少可以使用,如果数据字段比较多的话,会出现横向滚动条,在编辑的时候需要 来回拖动滚动条,客户使用上肯定会比较麻烦。

    代码

    <template >
      <a-layout id="components-layout-demo-top">
        <a-layout-content  style="overflow:auto;" >
          <a-spin :spinning="addOrUpdateLoading">
          <a-table  ref="table1"  :bordered="true" :columns="columns" :data-source="listdata"    class="whitetable" :pagination="false">
            <template slot="xuhaoslot" slot-scope="text, record, index">
              {{index+1}}
            </template>
            <template slot="nameslot" slot-scope="text, record, index">
              <div v-if="record.editable" >
                <a-input
                  style="margin: -5px 0"
                  :value="text"
                  @change="(e) => handleChangeIndex(e.target.value, index, 'name','listdata')"/>
              </div>
              <div v-else>
                {{text}}
              </div>
    
            </template>
            <template slot="functionslot" slot-scope="text, record, index">
              <div v-if="record.editable" >
                <a-input
                  style="margin: -5px 0"
                  :value="text"
                  @change="(e) => handleChangeIndex(e.target.value, index, 'function','listdata')"/>
              </div>
              <div v-else>
                {{text}}
              </div>
            </template>
    
            
    
            <template slot="operation" slot-scope="text, record, index">
              <div class="editable-row-operations">
                <span v-if="record.editable">
                    <a @click="saveRowIndex(record)">保存</a>&nbsp;
                  <a-popconfirm title="确定取消吗?" @confirm="() => cancelIndex(record)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a @click="() => editRowIndex(record,index)">编辑</a>&nbsp;
                  <a-popconfirm  title="确定删除吗?" @confirm="() => delRowIndex(index)">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </div>
            </template>
          </a-table>
          </a-spin>
        </a-layout-content>
    
      </a-layout>
    </template>
    
    <script>
    
    const columns =[{
      title:'序号',
      width:80,
      dataIndex: 'id',
      key: 'id',
      align:'center',
      scopedSlots:{customRender: 'xuhaoslot'}
    },
      {
        title:'名称',
        width:150,
        dataIndex: 'name',
        key: 'name',
        scopedSlots:{customRender: 'nameslot'}
      },
      {
        title:'功能',
        width:150,
        dataIndex: 'function',
        key: 'function',
        scopedSlots:{customRender:'functionslot'}
      },
      
      {
        title:'修改',
        width:150,
        scopedSlots: {customRender: 'operation'}
      }
    ]
    
    
    export default {
     
      data() {
        return {
          listdata:[],//列表行数据源
          columns, // 列表行 columns
          editingKey: '', //修改或新增标志
          addOrUpdateLoading:false,//加载中
    
        }
      },
      methods: {
       
        //修改行
        editRowIndex(record,key){
          //判断是否处于编辑状态
          if(this.editingKey !== null && this.editingKey !== ''){
            if(this.editingKey==='newkey'){
              this.$message.error('请先完成本次操作后在做添加')
            }else{
              this.$message.error('请先完成修改后在做添加')
            }
            return false
          }
          this.editingKey = key  //修改状态 防止 在修改时,点击新增
    
          
          //该行设置为 可编辑状态
          if (record) {
            record.editable = true
          }
        },
        //新增行
        addRow(){
          //判断是否处于编辑状态
          if(this.editingKey !== null && this.editingKey !== ''){
            if(this.editingKey==='newkey'){
              this.$message.error('请先完成本次操作后在做添加')
            }else{
              this.$message.error('请先完成修改后在做添加')
            }
            return false
          }
          this.editingKey = 'newkey'  //新增状态 防止 在新增时,点击修改
          this.listdata.push({
            id:'',
            name:'',
            functionTechnology:''
          })
        },
        //取消
        cancelIndex(record){
          //如果是新增,取消后需要删除 listdata 数组的 最后一个
          if(this.editingKey === 'newkey'){
            this.listdata.splice(this.listdata.length-1,1)
          }
          //重置 editable 数据
          record.editable=false
          this.editingKey=null
        },
        saveRowIndex(record){//保存或修改
          this.addOrUpdateLoading = true
         
          //调用后台方法 $axios ..... 
          // 调用成功之后根据自己的需求 看 要不要重新查询列表
    
    
        },
        //表格确定回调
        //value 修改后的数据
        //key 数据源数组的 第几个
        // column 修改的列名
        //data  修改的数据源 listdata
        handleChangeIndex(value, key, column,data) {
    
          
            const dataSource = this.listdata
            const target = dataSource[key]
            if (target) {
              target[column] = value
              this.listdata = dataSource
            }
          
        },
      },
      created() {
       
      }
    }
    </script>

    代码逻辑比较简单,每一个字段都是使用的scopedslots这种方式,template 中主要是两个需要来回显示的代码,一个是纯文本,一个是input,通过v-if='editable' 来判断显示哪一个,当点击编辑时 input 框显示,然后可以输入信息,每个输入框都有change 事件,每次修改,都会把信息保存在 listdata中, 点击保存,调用后台方法,保存数据,至于要不要刷新表格,看你的具体业务

    更多相关内容
  • ant design vue 中,表格的第一列是联动的选择框 截一张官方文档图,图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
  • 注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', ...
  • Ant Design Vue 表格自定义单元格

    千次阅读 2022-03-21 11:22:24
    环境: 查询 重置 {{ record.ruleName }} {{ record.ruleDescription }} {{ record.score }} {{ record.dayMaxScore }} 禁用 启用 禁用 启用 禁用 启用 保存 修改 问题: 如何在表格中自定义输入框、下拉框?...

    环境:

    <template>
        <page-view>
            <a-card>
                <div class="search-box">
                    <a-input v-model="table.query.ruleName" placeholder="输入关键词" />
                    <a-button type="primary" @click="onSearch"><a-icon type="search" />查询</a-button>
                    <a-button @click="reset"><a-icon type="undo" />重置</a-button>
                </div>
                <div class="table-wrapper">
                    <div>
                        <a-table
                            ref="table"
                            :columns="table.columns"
                            :dataSource="table.dataList"
                            :pagination="table.pagination"
                            @change="handleChangePage"
                        >
                            <span slot="ruleName" slot-scope="text, record">
                              <template>
                                  <span>{{ record.ruleName }}</span>
                              </template>
                            </span>
                            <span slot="ruleDescription" slot-scope="text, record">
                              <template>
                                    <span>{{ record.ruleDescription }}</span>
                              </template>
                            </span>
                            <span slot="score" slot-scope="text, record">
                              <template>
                                  <span v-if="!record.isUse">{{ record.score }}</span>
                                  <a-input-number v-if="record.isUse" v-model="record.score" :min="1"/>
                              </template>
                            </span>
                            <span slot="dayMaxScore" slot-scope="text, record">
                              <template>
                                  <span v-if="!record.isUse">{{ record.dayMaxScore }}</span>
                                  <a-input-number v-if="record.isUse" v-model="record.dayMaxScore" :min="record.score"/>
                              </template>
                            </span>
                            <span slot="state" slot-scope="text, record, index">
                              <template>
                                <div v-if="!record.isUse">
                                   <span v-if="record.state == 0">禁用</span>
                                   <span v-if="record.state == 1">启用</span>
                                </div>
                                <a-dropdown v-if="record.isUse">
                                  <a class="ant-dropdown-link">
                                      <span v-if="record.state == 0">禁用</span>
                                      <span v-if="record.state == 1">启用</span>
                                    <a-icon type="down" />
                                  </a>
                                  <a-menu slot="overlay">
                                    <a-menu-item v-if="record.state == 1">
                                      <a href="javascript:;" @click="handleChangeStatus(record, index, 0)">禁用</a>
                                    </a-menu-item>
                                    <a-menu-item v-if="record.state == 0">
                                      <a href="javascript:;" @click="handleChangeStatus(record, index, 1)">启用</a>
                                    </a-menu-item>
                                  </a-menu>
                                </a-dropdown>
                              </template>
                            </span>
                            <span slot="action" slot-scope="text, record, index">
                              <template>
                                <a-button v-if="record.isUse" style="border-color: #1890ff;color: #1890ff;" @click="handleSaveCol(record, index)">保存</a-button>
                                <a-button v-if="!record.isUse" style="border-color: forestgreen;color: forestgreen;margin: 0 4px" @click="handleChangeCol(record, index)">修改</a-button>
                              </template>
                            </span>
                        </a-table>
                    </div>
                </div>
            </a-card>
        </page-view>
    </template>
    
    <script>
        import {listPage, saveOrUpdate} from '@/api/point/point'
        import {columns} from './constant'
        export default {
            name: 'PointSetting',
            data() {
                return {
                    table: {//表格数据
                        columns: columns,
                        query: {},
                        dataList: [
                            // { ruleName: 2,ruleDescription:333,score:444, state: 1,dayMaxScore:222 }
                        ],
                        pagination: {
                            current: 1,
                            pageSize: 10,
                            total: 0
                        },
                    },
                }
              },
            created() {
                this.listPage();//加载列表
            },
            methods: {
                listPage(pagination, filters, sorters) {
                    const params = Object.assign({
                        ruleName: this.table.query.ruleName
                    }, pagination, filters, sorters);
                    return listPage(params)
                        .then(response => {
                            this.table.dataList = response.data;
                        })
                },
                onSearch() {
                    this.listPage();//刷新列表
                },
                reset() {
                    this.table.query = {};//清空查询条件
                    this.listPage();//重置列表
                },
                handleChangePage(page) {
                    this.table.pagination.current = page.current
                },
                handleChangeStatus(data, index, type) {
                    this.table.dataList.splice(index, 1, {
                        ...data,
                        state: type
                    })
                },
                // 保存按钮
                handleSaveCol(data, index) {
                    this.table.dataList.splice(index, 1, {
                        ...data,
                        isUse: false
                    })
                    console.log(data)
                    this.saveOrUpdate(data);
                },
                // 修改按钮
                handleChangeCol(data, index) {
                    this.table.dataList.splice(index, 1, {
                        ...data,
                        isUse: true
                    })
                },
                //保存方法
                saveOrUpdate(data) {
                    return saveOrUpdate(data.id, data).then(
                        response => {
                            return response;
                        }
                    );
                },
              }
        };
    </script>
    
    <style scoped>
        .search-box {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .search-box>button {
            margin-left: 15px;
        }
        .search-box>input {
            width: 200px;
        }
        .ant-dropdown-link>span {
            margin-right: 5px;
        }
    </style>
    

    问题:

    如何在表格中自定义输入框、下拉框?

    解决:

    constant.js中代码

    import { initTimeDate } from '@/utils/utils'
    export const columns = [
      {
        title: '序号',
        width: '80px',
        align: 'center',
        customRender: (text, record, index) => {
          return index + 1;
        },
      },
      {
        title: '积分规则',
        width: '200px',
        align: 'center',
        dataIndex: 'ruleName',
        scopedSlots: { customRender: 'ruleName' },
      },
      {
        title: '规则说明',
        align: 'center',
        dataIndex: 'ruleDescription',
        scopedSlots: { customRender: 'ruleDescription' },
    
      },
      {
        title: '分值',
        align: 'center',
        width: '200px',
        dataIndex: 'score',
        scopedSlots: { customRender: 'score' },
      },
      {
        title: '每日分值上限',
        dataIndex: 'dayMaxScore',
        align: 'center',
        width: '200px',
        scopedSlots: { customRender: 'dayMaxScore' },
      },
      {
        title: '状态',
        dataIndex: 'state',
        align: 'center',
        width: '150px',
        scopedSlots: { customRender: 'state' },
      },
      {
        title: '操作',
        dataIndex: 'action',
        width: '200px',
        align: 'center',
        scopedSlots: { customRender: 'action' },
      },
    ];
    
    export const columnsTwo = [
      {
        title: '序号',
        width: '80px',
        align: 'center',
        customRender: (text, record, index) => {
          return index + 1;
        },
      },
      {
        title: '部门机构',
        align: 'center',
        dataIndex: 'diskName',
      },
      {
        title: '用户姓名',
        width: '150px',
        align: 'center',
        dataIndex: 'diskSize',
        scopedSlots: { customRender: 'diskSize' },
    
      },
      {
        title: '积分',
        align: 'center',
        width: '200px',
        dataIndex: 'createTime',
      },
    ];
    

    展开全文
  • ant design vue 表格Table使用 1.嵌套子表 <a-table rowKey="arcId" :columns="columns" :dataSource="loadData" @expand="handldOnExpand" :loading="tableLoading" > <span slot="action" slot-...

    ant design vue 表格Table使用

    1.嵌套子表

    在这里插入图片描述

    <a-table
       rowKey="arcId"
       :columns="columns"
       :dataSource="loadData"
       @expand="handldOnExpand"
       :loading="tableLoading"
     >
       <span slot="action" slot-scope="text, record">
         <a v-if="record.status !=0" @click="getarcListByStaus(record)">填表归档</a>
         <a-divider v-if="record.status !=0" type="vertical" />
         <a v-if="record.status !=0" @click="getarcListByStaus2(record)">上传归档</a>      
         <a v-else @click="updateByStaus(record.arcId)">取消归档</a>
       </span>
       // 子表格
       <a-table
          slot="expandedRowRender"  slot-scope="record,text"
          :columns="innerColumns"
          :data-source="record.newchildren"
          :pagination="false"
          // 不显示表头
          :showHeader="false"
        >
          <span slot="operation" slot-scope="text,record">
            <a v-if="record.status !=0" @click="getarcListByStaus2(record)">上传归档</a>      
            <a v-else @click="updateByStaus(record.arcId)">取消归档</a>
          </span>
        </a-table>   
     </a-table>
    
    
    // 展开闭合按钮事件
    handldOnExpand(expanded, record) {
          console.log(expanded,record);
          if (!expanded) return //如果是关闭就返回
          if (record.children && record.children.length > 0) return //如果已经有数据就返回
          const id = record.arcId
          // 获取当前行下的子表数据
          getArcList(Object.assign({ parentid: id })).then((res) => {
            // console.log("aaaaaaaaa");
            const children = res.rows || []
            this.loadData.forEach(item =>{
              if(item.arcId === id){
              // 将子表数据存放到父项的newchildren对象中
                item.newchildren=children
                // console.log(item.children);
                this.loadData = [...this.loadData]
            }})
          })
        },
    
    
    2.给表格加上loading
    <a-table
       rowKey="arcId"
       :columns="columns"
       :dataSource="loadData"
       @expand="handldOnExpand"
       :loading="tableLoading"
     >
    </a-table>
    
    this.tableLoading = true
    //结束
    this.tableLoading = false
    
    
    3.某一列排序
    // 表头设置
    {
       title: '项目编号',
       dataIndex: 'number',
       align: 'center',
       sorter: (a, b) => a.number.localeCompare(b.number),
    },
    
    展开全文
  • Ant Design Vue 表格穿梭框使用

    千次阅读 2022-04-22 09:27:38
    <a-transfer :data-source="mockData" :target-keys="targetKeys" :show-search="true" :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1" :show-select-all="false" ...

    html代码

    <a-transfer
      :titles="['可选属性', '已选属性']"
      :dataSource="mockData"
      :target-keys="targetKeys"
      :show-search="true"
      :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
      :show-select-all="false"
      @change="onChange1"
      @search="handleSearch"
    >
      <template
        slot="children"
        slot-scope="{
          props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
          on: { itemSelectAll, itemSelect },
        }"
      >
        <a-table
          :row-selection="
    	      getRowSelection({
    	         disabled: listDisabled,
    	          selectedKeys,
    	          itemSelectAll,
    	          itemSelect,
    	      })
    	    "
          :columns="direction === 'left' ? leftColumns : rightColumns"
          :data-source="filteredItems"
          size="small"
          :pagination="false"
          :scroll="{y: 205}"
          :style="{ pointerEvents: listDisabled ? 'none' : null }"
          :custom-row="
            ({ key, disabled: itemDisabled }) => ({
              on: {
                click: () => {
                  if (itemDisabled || listDisabled) return;
                  itemSelect(key, !selectedKeys.includes(key));
                },
              },
            })
          "
        />
      </template>
    </a-transfer>
    

    js部分

    <script>
    const mockData = []
    const originTargetKeys = []
    const leftTableColumns = [
        {
            dataIndex: 'fieldCnName',
            title: '属性名称',
             align: 'center',
        },
    ]
    const rightTableColumns = [
      {
       
        title: '序号',
        align: 'center',
        width: '30px',
         customRender: (text, record, index) => `${index + 1}`,
      },
        {
            dataIndex: 'fieldCnName',
            title: '属性名称',
             align: 'center',
        },
    ]
    export default {
      data() {
        return {
          mockData,
          targetKeys: originTargetKeys,
          disabled: false,
          leftColumns: leftTableColumns,
          rightColumns: rightTableColumns,
          rootSubmenuKeys: [],
          openKeys: [],
        }
      },
      methods: {
        onOpenChange(openKeys) {
           console.log(openKeys, this.$route.path)
            const latestOpenKey = openKeys.find((key) => this.openKeys.indexOf(key) === -1)
            console.log(latestOpenKey, this.rootSubmenuKeys.indexOf(latestOpenKey) === -1)
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                this.openKeys = openKeys
            } else {
                this.openKeys = latestOpenKey ? [latestOpenKey] : []
            }
        },
         onChange1(nextTargetKeys, direction, moveKeys) {
      
           console.log(nextTargetKeys, direction, moveKeys)
            this.targetKeys = nextTargetKeys
           
            let tableDir = this.tableDir
           
             if (this.tableDir != this.tableDirs) {
               this.rigdata=[]
                this.totalRolesList.forEach((item1) => {
                  item1.modelList.forEach((item2) => {
                      if (tableDir == item2.entityCnName) {
                        this.umn  = item2.fieldCount 
                      }
                  })
              })
             }
             if (direction == 'right') {
               this.rigdata.push(moveKeys.length)
                
                
                 this.umn =  eval( this.rigdata.join("+")) 
                
                 this.tableDirs = tableDir
             }else{
               console.log(9999999);
                console.log(this.umn);
               this.umn = this.umn - moveKeys.length
                //     this.tableDirs = tableDir
             }
             
               console.log(this.umn);
               
            // console.log(tableDir, length, this.totalRolesList)
            this.totalRolesList.forEach((item1) => {
                item1.modelList.forEach((item2) => {
                    if (tableDir == item2.entityCnName) {
                      item2.fieldCount = this.umn   
                    }
                })
            })
            
        
        },
        // 搜索框
        handleSearch(dir, value) {
            console.log('search:', dir, value)
        },
        getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
           return {
                getCheckboxProps: (item) => ({ props: { disabled: disabled || item.disabled } }),
                onSelectAll(selected, selectedRows) {
                    if (selected == true) {
                        const treeSelectedKeys = selectedRows.filter((item) => !item.disabled).map(({ key }) => key)
    
                        itemSelectAll(treeSelectedKeys, selected)
                    } else if (selected == false) {
                        let treeSelectedKeys = this.selectedRowKeys
    
                        itemSelectAll(treeSelectedKeys, selected)
                    }
    
                    // console.log(decodeDeltasqqq);
                },
                onSelect({ key }, selected) {
                    console.log(key, selected)
                    itemSelect(key, selected)
                },
    
                selectedRowKeys: selectedKeys,
            }
        },
    }
    </script>
    
    展开全文
  • 效果图: 实现关键代码就是表单的 columns 属性对象下标的 scopedSlots: scopedSlots: { customRender: '' } 实现完整代码: ...--每个列的宽度必须比列名总长度大才能使表格所有列对齐,留一个.
  • Ant Design vue 表格内换行

    千次阅读 2022-03-25 17:59:11
    data() { return { // 表头 columns: [ { title: '序号', dataIndex: '', key: 'rowIndex', // width: 50, align: 'center', customRender: function(t, r, index) { return ..
  • 主要介绍了ant-design-vue 实现表格内部字段验证功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 问题遇到的现象和发生背景 ant+vue 想在表格中显示图片,在c站找了各种写法,都显示不出来。 问题相关代码,请勿粘贴截图 页面完整代码 <template> <a-row :gutter="24"> <a-col :md="24"> ...
  • ant design vue表格拖拽排序sortTableJS

    千次阅读 2022-03-08 16:35:28
    _this.mockData.splice(evt.oldIndex, 1) }, }) Sortable.create(tbody[1], { sort: true, handle: '.ant-table-row', animation: 150, group: { name: 'name', pull: true, put: true }, ghostClass: 'sortable-...
  • render函数进行递增的时候是不支持跨页递增的,如果我们想要跨页递增是需要做的配置的,不过也很简单,下面看代码 1、columns属性配置 {title: '序号',dataIndex: 'num', key: 'num',width:50,scopedSlots: { ...
  • import moment from 'moment' tableHeader: [ { dataIndex: 'purchaseVoucherDate', title: '凭证日期', //'凭证日期', width:160, customRender: (text, row, index) => { return moment(text).format...
  • 如图所示: 代码核心处 1、表单columns 属性对象下标的 scopedSlots: 完整源码(已将导入导出等无关功能代码删除) <template> <div> <a-modal width="1400px" title="SAP产成品产出" ...di
  • antDesignVue中table列的隐藏与展示
  • antdesign vue ----table <template> <a-table :columns="columns" :data-source="data" bordered</a-table> </template> <script> // data为数据 const data = [ { projectName: ...
  • 如图,想要实现在表头就能筛选出某个标签的项目 按ant design vue模板写有点问题,我的pState传过来的是tinyint类型,我是需要对他进行判断后才展示“进行中”“已结束”的标签,请问该怎么修正呢? <template> ...
  • .ant-table:hover .ant-table-content .ant-table-fixed-right .ant-table-body-outer .ant-table-body-inner::-webkit-scrollbar-thumb { background-color: #999; } .ant-table .ant-table-content .ant-...
  • ant design vue 表格 Table 实现导出功能

    千次阅读 2021-06-28 10:17:13
    当你搜这个问题的时候,我想你已经知道了 ant design vue 的 Table 组件没有导出功能,比用 View UI 麻烦一点 话不多说 直接上可以跑的代码供大家参考使用 表格写两个,一个导出用,隐藏掉;另一个展示用。主要是 ...
  • ant design vue 表格 过滤

    千次阅读 2020-04-15 22:20:14
    使用ant design vue 的table组件,不分页,通过输入框对table中的数据进行筛选。 原始数据 过滤后的数据 解决方案 export default { mounted() { this.fetch(); }, data() { return { title: "", data: [] ...
  • ant Design Vue 表格右键

    2019-12-09 10:40:59
    1,在表格外面添加menu组件 <a-menu class="menustyle" :style="menuStyle" v-if="menuVisible"> <a-menu-item> <a @click="lookBuilding(recordRow)">查看</a> </a-menu-item...
  • 新需求Tabs切换时表格重新渲染 利用Tabs的destroyInactiveTabPane属性可摧毁隐藏的TabPane <Tabs destroyInactiveTabPane /> 实例 <a-tabs default-active-key="2" @change="callback" destroyInactiveTabPane > 不...
  • ant design vue表格合并

    2022-01-28 10:35:21
    ant design vue表格合并 先看一下官方文档给出的合并单元格的方法,要合并Home phone这一列,columns中的代码如下: { title: 'Home phone', colSpan: 2, dataIndex: 'tel', customRender: (value, row, index) ...
  • 多选/单选:type :checkbox/type :radio
  • antDesignVue 表格默认选中多个且不能取消
  • antdesign Vue表格的层级筛选 去百度了一下,几乎没有找到有关于antd关于vue的层级筛选实现的文章,本人前端刚起步,就硬着头皮用纯js实现。 初步设想是通过dom操作去遍历拿到所有值,然后做个去重,以map的方式存...
  • Ant Design Vue 表格行内编辑!!!

    万次阅读 热门讨论 2019-12-18 17:22:19
    Ant Design Vue 表格行内编辑,功能非常全面!
  • ant design vue 表格如何开启列排序

    千次阅读 2020-02-19 23:44:12
    开启排序 1、本地数据排序 column数据设置,需要开启的列设置sorter: (a, b) => a.address.length - b....点击排序,表格触发change方法,接受参数 change (pagination, filters, sorter, { currentDataSou...
  • source="projectList" :pagination="pagination" :rowKey="record=>record.pId" :style="{padding:'10px 0px',margin:'0px'}" > {{ ((this.current-1)*5)+(index+1)}} 进行中 已结束 查看详情 此为对应的vue文件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,755
精华内容 1,502
关键字:

ant design vue表格