精华内容
下载资源
问答
  • vue表格编辑实例

    2018-06-15 13:40:05
    这是一个基于vue2.0的表格编辑实例,下载下来在浏览器打开,可以看到效果,编辑器打开可以看到源码,源码清晰明了
  • Ant Design Vue 表格行内编辑!!!

    千次阅读 热门讨论 2019-12-18 17:22:19
    Ant Design Vue 表格行内编辑,功能非常全面!

    效果图

    无图言叼,直接上图:
    在这里插入图片描述
    在这里插入图片描述

    应用场景

    对于修改表格数据,比较主流的是通过模态框内嵌表单来修改。这样上手比较简单,验证功能很强大。如果通过表格行内编辑的话,上手稍微复杂一点,直接在列里面修改,会非常直观顺畅,但是有一定的缺陷,无法内嵌表单,验证起来比较不友好。

    .Vue

    <template>
      <div>
        <div class="page-location-wrapper">
          <bread-nav :nav-list="['数据模版', '数据模版DEMO']"/>
          <h1>数据模版DEMO</h1>
        </div>
        <div class="public-container">
          <div class="public-operation-bar">
            <div class="button-wrapper">
              <a-button icon="plus-circle" type="primary"
                        @click="addRow">新增
              </a-button>
              <a-button type="primary">批量发布</a-button>
            </div>
          </div>
          <a-divider/>
          <div class="table-wrapper">
            <!--每个列的宽度必须比列名总长度大才能使表格所有列对齐,留一个列不设置宽度-->
            <a-table
              :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelectAll: onSelectAllChange}"
              :columns="columns"
              :dataSource="tableData"
              bordered
              size="middle"
              :pagination="pagination"
              :loading="tableLoading"
              :scroll="{x: 2050}"
            >
              <template
                v-for="col in customRenderList"
                v-slot:[col]="text, record, index"
              >
                <div :key="col">
                  <a-input
                    :read-only="readonlyArr.includes(col)"
                    placeholder="请输入"
                    v-if="record.editable && inputScopedSlots.includes(col)"
                    :value="text"
                    @change="e => handleChange(e.target.value, record.key, col)"
                  />
                  <a-date-picker
                    placeholder="请选择时间"
                    v-else-if="record.editable && dateScopedSlots.includes(col)"
                    :value="momentDateStr(text)"
                    @change="onChangeDate($event, record.key, col)"
                  />
                  <a-select
                    placeholder="请选择"
                    style="display: block;"
                    v-else-if="record.editable && selectScopedSlots.includes(col)"
                    :value="text"
                    @change="onChangeSelect($event, record.key, col)"
                  >
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="jack">Jack</a-select-option>
                  </a-select>
                  <span v-else>{{text}}</span>
                </div>
              </template>
    
              <template #action="text, record, index">
                <div class="editable-row-operations">
                  <div v-if="record.editable">
                    <a @click="save(record.key)">保存</a>
                    <a-divider type="vertical"/>
                    <a @click="cancel(record.key)">取消</a>
                  </div>
                  <div v-else>
                    <a @click="edit(record.key)">编辑</a>
                  </div>
                </div>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      import Mixin from './mixin'
      import Moment from 'moment'
    
      export default {
        name: "DataTemplateDemo",
        mixins: [Mixin],
        methods: {
          // 将时间字符串 转换 为 Moment
          momentDateStr(dateStr) {
            return Moment(dateStr)
          }
        }
      }
    </script>
    

    Mixin

    import {clearReference} from '@/utils/utils'
    
    const data = []
    
    for (let i = 0; i < 10; i++) {
      data.push({
        key: i,
        a: '2019-12-17',
        b: 'lucy',
        c: '22',
        e: '22',
        d: '22',
        f: '22',
        g: '22',
        h: '22',
        i: '22',
        j: '22',
        editable: false
      })
    }
    
    const Mixin = {
      data() {
        return {
          // 表格列 - 为了方便使 dataIndex === scopedSlots.customRender
          columns: [
            {title: '左边固定', width: 200, align: 'center', dataIndex: 'a', fixed: 'left', scopedSlots: {customRender: 'a'}},
            {title: '测试列3', width: 200, dataIndex: 'b', scopedSlots: {customRender: 'b'}},
            {title: '测试列4', width: 200, dataIndex: 'c', scopedSlots: {customRender: 'c'}},
            {
              title: '测试列5', width: 200, children: [
                {title: '分组1', width: 200, dataIndex: 'e', scopedSlots: {customRender: 'e'}},
                {title: '分组2', width: 200, dataIndex: 'j', scopedSlots: {customRender: 'j'}},
              ]
            },
            {title: '测试列6', width: 200, dataIndex: 'f', scopedSlots: {customRender: 'f'}},
            {title: '测试列7', width: 200, dataIndex: 'g', scopedSlots: {customRender: 'g'}},
            {title: '测试列8', width: 200, dataIndex: 'h', scopedSlots: {customRender: 'h'}},
            {title: '测试列8', dataIndex: 'i', scopedSlots: {customRender: 'i'}},
            {title: '右边固定2', width: 200, align: 'center', scopedSlots: {customRender: 'action'}, fixed: 'right'},
          ],
          // 表格数据
          tableData: [],
          // 表格缓存的数据 - 用来点击取消时回显数据
          cacheData: [],
          // 每一列的插槽名 - 表格行内编辑用
          customRenderList: ['a', 'b', 'c', 'e', 'f', 'g', 'h', 'i', 'j'],
          // 用来匹配插槽中显示input框
          inputScopedSlots: ['c', 'e', 'f', 'g', 'h', 'i', 'j'],
          // 用来匹配插槽中显示date框
          dateScopedSlots: ['a'],
          // 用来匹配插槽中显示select框
          selectScopedSlots: ['b'],
          // 对于某些自动赋值的input框设为 只读
          readonlyArr: ['c'],
          // 表格分页
          pagination: {
            current: 1,
            size: 'large',
            pageSize: 10, // 默认每页显示数量
            total: 0, // 总条数
            showQuickJumper: true,
            showTotal: (total, range) => `总共 ${total} 条记录,当前第 ${range[0]}条至第${range[1]}条`,
            onChange: (page) => this.pageChange(page)
          },
          // 表格loading
          tableLoading: false,
          // 表格选中key
          selectedRowKeys: []
        }
      },
      created() {
        // 此处模拟ajax,赋值(需清除引用)
        this.tableData = clearReference(data)
        this.cacheData = clearReference(data)
      },
      methods: {
        // 分页事件
        pageChange(page) {
          this.pagination.current = page
        },
        // 表格选中事件
        onSelectChange(selectedRowKeys) {
          console.log(selectedRowKeys);
          this.selectedRowKeys = selectedRowKeys;
        },
        // 表格点击全选事件
        onSelectAllChange(selected, selectedRows) {
          // 判断 全选并且第一行数据为新增 则不选中新增那一行
          if (selected && selectedRows[0].key === 'newRow') {
            this.selectedRowKeys.splice(0, 1)
          }
        },
        // 添加一行
        addRow() {
          if (this.tableData.some(item => item.newRow === true)) return this.$message.info('请先编辑完毕后在再添加!');
    
          // 新增时取消表格选中的key
          this.selectedRowKeys = []
    
          this.tableData.unshift({
            key: 'newRow',  // newRow 表示该行是新增的,提交成功后 key替换为数据库ID
            newRow: true,   //用来限制只能新增一行
            a: this.$dateformat(new Date(), 'isoDate'),
            b: undefined,
            c: '',
            e: '',
            d: '',
            f: '',
            g: '',
            h: '',
            i: '',
            j: '',
            editable: true
          })
          this.cacheData.unshift({
            key: 'newRow',
            newRow: true,
            a: this.$dateformat(new Date(), 'isoDate'),
            b: undefined,
            c: '',
            e: '',
            d: '',
            f: '',
            g: '',
            h: '',
            i: '',
            j: '',
            editable: false
          })
        },
        // 编辑一行
        edit(rowKey) {
          const newData = [...this.tableData];
          const target = newData.filter(item => rowKey === item.key)[0];
          // 根据rowKey判断该行数据是否存在
          if (target) {
            target.editable = true;   // 修改target可以直接影响到newData
            this.tableData = newData;
          }
        },
        // 点击保存
        save(rowKey) {
          const newData = [...this.tableData];
          const target = newData.filter(item => rowKey === item.key)[0];
          if (target) {
            delete target.editable;
            this.tableData = newData;
            this.cacheData = newData.map(item => ({...item}));
          }
        },
        // 点击取消
        cancel(rowKey) {
          const newData = [...this.tableData];
          const target = newData.filter(item => rowKey === item.key)[0];
          if (target) {
            // 将缓存数据中匹配到的数据对象覆盖合并当前被修改的行
            Object.assign(target, this.cacheData.filter(item => rowKey === item.key)[0]);
            delete target.editable;
            this.tableData = newData;
          }
        },
        // input 输入change
        handleChange(value, rowKey, colName) {
          const newData = [...this.tableData];
          const target = newData.filter(item => rowKey === item.key)[0];
          if (target) {
            target[colName] = value;
            this.tableData = newData;
          }
        },
        // 日期框 change
        onChangeDate($event, rowKey, colName) {
          const newData = [...this.tableData];
          const target = newData.filter(item => rowKey === item.key)[0];
          if (target) {
            target[colName] = this.$dateformat($event, 'isoDate');
            this.tableData = newData;
          }
        },
        // select 框 change
        onChangeSelect($event, rowKey, colName) {
          const newData = [...this.tableData];
          const target = newData.filter(item => rowKey === item.key)[0];
          if (target) {
            target[colName] = $event;
    
            // 根据select框的值自动带出某个input的值 - 因为第三列列名为c
            $event === 'lucy' ? target.c = '根据lucy带出的值' : target.c = '根据jack带出的值'
    
            this.tableData = newData;
          }
        }
      }
    }
    
    export default Mixin
    
    

    实现原理

    基于antV官方的一个 demo 加上自己一些新增的实现,具体实现在代码里面有非常详细的注释。无奈没有更多的时间去优化这篇长大粗的博文,目前只能简单粗暴的将demo代码粘上来。

    补充

    对于文中的 clearReference 方法其实就是 JSON.parse(JSON.stringify(obj))
    补充于 2021年3月22日:this.$dateformat 是 https://www.npmjs.com/package/dateformat 插件

    展开全文
  • antd vue 表格编辑

    千次阅读 2020-09-22 17:04:52
    template: <a-table :columns="tableColumns" :data-source="tableData"> <span v-for="i in tableColumns" :key="i.dataIndex" :slot="i.dataIndex" slot-scope="text" contentEditable=true>...

    template:

    <a-table :columns="tableColumns" :data-source="tableData">
              <span v-for="i in tableColumns" :key="i.dataIndex" :slot="i.dataIndex" slot-scope="text" contentEditable=true>			
              		{{text}}
              </span>
    </a-table>	
    

    在tableColumns中:

    const tableColumns = [
        { title: "编号", dataIndex:"stdId",
          scopedSlots: { customRender: "stdId" }}
    ];
    

    还有一个问题就是点击单元格会出现一个border,取消掉的css样式:

    [contenteditable]:focus{outline: none;}
    
    展开全文
  • 实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件...表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="...

    实现效果:

    因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件

    表格外层可以翻页,查询携带页码参数

    <a-table
          size="default"
          rowKey="dict_id" //根据自己数据内部关键针设定
          ref="table"
          @expandedRowsChange="expandedRowsChange"
          @expand="expand" // 展开表格节点操作
          @change="change" // 外层表格中排序,翻页,修改页面数量等操作
          :expandedRowKeys="expandedRowKeys" // 操作展开的节点
          :pagination="pagination" // 页码参数
          :columns="columns" // 表头
          :dataSource="loadData" // 数据
        >
          <a-table
            size="default"
            style="margin-bottom:0;"
            rowKey="key"
            slot="expandedRowRender" // 以内层方式展现
            :columns="innerColumns"
            :dataSource="data"
            :pagination="false"
            :loading="innerloading"
            @change="innerhandleChange"
          >
            <template v-for="(col, i) in ['item_text', 'item_value', 'item_checked', 'item_remark', 'item_sort', 'item_status']" :slot="col" slot-scope="text, record">
              <a-input
                :key="col"
                v-if="record.editable"
                style="margin: -5px 0"
                :value="text"
                :placeholder="innerColumns[i].title"
                @change="e => handleChange(e.target.value, record.key, col)"
              />
              <template v-else>{{ text }}</template>
            </template> // 内部表格可编辑模板
            <template slot="operation" slot-scope="text, record">
              <template v-if="record.editable">
                <span v-if="record.isNew">
                  <a @click="saveRow(record)">添加</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="是否要删除此行?" @confirm="remove(record.key)">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a @click="saveRow(record)">保存</a>
                  <!-- <a-divider type="vertical" />
                  <a @click="cancel(record.key)">取消</a> -->
                </span>
              </template> // 内部表格新增模板
              <span v-else>
                <a @click="toggle(record)">编辑</a>
              </span>
            </template>
          </a-table>
          <div
            slot="expandedRowRender"
            style="margin: 0">
            <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增属性</a-button>
          </div>
          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">编辑</a>
          </span>
        </a-table>

    主要数据:

          expandedRowKeys: [],
          // 表头
          columns: [
            {
              title: '字典编码',
              dataIndex: 'dict_code'
            },
            {
              title: '字典名称',
              dataIndex: 'dict_name'
            },
            {
              title: '状态',
              dataIndex: 'dict_status'
            },
            {
              title: '字典描述',
              dataIndex: 'dict_remark'
            }, {
              title: '操作',
              width: '150px',
              dataIndex: 'action',
              scopedSlots: { customRender: 'action' }
            }
          ],
          loadData: [],
          innerColumns: [
            {
              title: '字段名',
              dataIndex: 'item_text',
              key: 'item_text',
              width: '15%',
              scopedSlots: { customRender: 'item_text' }
            },
            {
              title: '字段值',
              dataIndex: 'item_value',
              key: 'item_value',
              width: '15%',
              scopedSlots: { customRender: 'item_value' }
            },
            {
              title: '默认选中(0:否,1:是)',
              dataIndex: 'item_checked',
              key: 'item_checked',
              width: '10%',
              scopedSlots: { customRender: 'item_checked' }
            },
            {
              title: '备注',
              dataIndex: 'item_remark',
              key: 'item_remark',
              width: '20%',
              scopedSlots: { customRender: 'item_remark' }
            },
            {
              title: '排序号',
              dataIndex: 'item_sort',
              key: 'item_sort',
              width: '10%',
              sorter: true,
              scopedSlots: { customRender: 'item_sort' }
            },
            {
              title: '状态(1:正常,2:异常)',
              dataIndex: 'item_status',
              key: 'item_status',
              width: '10%',
              scopedSlots: { customRender: 'item_status' }
            },
            {
              title: '操作',
              key: 'action',
              scopedSlots: { customRender: 'operation' }
            }
          ],
          data: [],
          innerloading: false,
          parameter: {
            pageNo: 1,
            pageSize: 10
          },
          // 排序参数
          sortedInfo: null,
          pagination: {
            total: 1,
            current: 1,
            showTotal: total => `共 ${total} 条记录 第 ${this.pagination.current} / ${Math.ceil(total / this.pagination.pageSize)} 页`,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSize: 10
          }

    初始进入页面时,需要获取外层表格

    使用初始参数parameter请求第一页数据,从返回数据中对pagination重置翻页组件内部参数,主要有当前页,页码总量,页码大小

    getDictList(this.parameter)
            .then(res => {
              if (res.code === '200') {
                console.log(res)
                this.loadData = res.data
                this.pagination.total = res.totalCount
                this.pagination.current = res.pageNo
                this.pagination.pageSize = res.pageSize
              } else {
                this.$message.error(res.message)
              }
            })

    展开外层数据节点获取内部数据:

    expand (expanded, record) {
          this.expandedRowKeys = [] // 重置展开节点,只展开当前点击的节点(内部数据调用模板,无法做到同时几个内层表格数据直接缓存在页面)
          if (expanded) {
            this.expandedRowKeys = [record.dict_id]
            this.getDictItem() // 获取表格内部数据
          }
          console.log(expanded, record)
        },
    // 展开节点后获取内部表格数据
    getDictItem (obj) {
          let searchparam = { dict_id: this.expandedRowKeys[0] }
          if (obj) { // 内部表格除了根据其父节点id查找的条件外,还支持排序,因此需要整合排序参数
            searchparam = Object.assign(searchparam, obj)
          }
          this.innerloading = true
          getDictItemList(searchparam).then(res => {
            if (res.code === '200') {
              this.data = res.data
              this.innerloading = false
            } else {
              this.$message.error(res.message)
            }
          })
        },
    // 外层表格操作
        change (pagination, filters, sorter) { // 对页面大小,筛选,排序等条件修改后重新查询数据
          this.pagination = pagination
          this.parameter.pageNo = pagination.current
          this.parameter.pageSize = pagination.pageSize
          this.getDict()
          console.log('pagination', pagination)
          console.log('filters', filters)
          console.log('sorter', sorter)
        },
        /* 内层表格操作 */
        innerhandleChange (pagination, filters, sorter) {
          console.log('Various parameters', pagination, filters, sorter)
          this.sortedInfo = {
            sortField: sorter.field,
            sortOrder: sorter.order
          }
          this.getDictItem(this.sortedInfo)
        },

    至此,展示功能已经几乎做完啦,现在是内部表格的编辑与新增功能

    handleChange (value, key, column) { // 实时更新表格中各个输入框的状态
          const newData = [...this.data]
          const target = newData.filter(item => key === item.key)[0]
          if (target) {
            target[column] = value
            this.data = newData
          }
        },
        toggle (data) { // 切换输入框与文本状态,实现展示与编辑功能
          const target = this.data.filter(item => item.key === data.key)[0]
          target.editable = !target.editable
          console.log(this.data)
        },
        newMember () { // 新增内容后的数据字段
          this.data.push({
            'item_text': '',
            'item_value': '',
            'item_checked': '',
            'item_remark': '',
            'item_sort': '',
            'item_status': '',
            key: this.data.length,
            editable: true,
            isNew: true
          })
        },
        saveRow (record) {
          this.innerloading = true
          if (!record.item_text || !record.item_value) { // 对必填项进行管控
            this.innerloading = false
            this.$message.error('请至少填写填写字段名和字段值。')
            return
          }
          record.item_checked = record.item_checked || 0 // 设置默认值
          record.item_sort = record.item_sort || 1
          record.item_status = record.item_status || 1
          record.dict_id = this.expandedRowKeys[0]
          if (record.item_id) { // 修改
            updateItem(record).then(res => {
              if (res.code === '200') {
                this.$message.success(res.message)
                this.getDictItem() // 修改成功后重新获取当前内部表格数据
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            addItem(record).then(res => {
              if (res.code === '200') {
                this.$message.success(res.message)
                this.getDictItem()
              } else {
                this.$message.error(res.message)
              }
            })
          }
        },
        cancel (key) {
          const target = this.data.filter(item => item.key === key)[0]
          target.editable = false
        },
        remove (key) {
          const newData = this.data.filter(item => item.key !== key)
          this.data = newData
        },
        /* 内层表格操作结束 */

    外层表格与内存表格数据示例:

    {
      "success": true,
      "code": "200",
      "message": "分页查询成功",
      "data": [{
        "dict_id": 1,
        "dict_code": "common_org_type",
        "dict_name": "机构类别",
        "dict_pid": null,
        "dict_status": 1,
        "dict_remark": "机构类别"
      }, {
        "dict_id": 2,
        "dict_code": "common_user_type",
        "dict_name": "人员类别",
        "dict_pid": null,
        "dict_status": 1,
        "dict_remark": "人员类别"
      }, {
        "dict_id": 48,
        "dict_code": "cdsfcsdcf",
        "dict_name": "修改属性1",
        "dict_pid": null,
        "dict_status": 1,
        "dict_remark": ""
      }, {
        "dict_id": 49,
        "dict_code": "bugbugbug",
        "dict_name": "有字典id",
        "dict_pid": null,
        "dict_status": 1,
        "dict_remark": ""
      }, {
        "dict_id": 50,
        "dict_code": "1",
        "dict_name": "名称",
        "dict_pid": null,
        "dict_status": 1,
        "dict_remark": "1"
      }, {
        "dict_id": 51,
        "dict_code": "1",
        "dict_name": "1",
        "dict_pid": null,
        "dict_status": 1,
        "dict_remark": null
      }, {
        "dict_id": 52,
        "dict_code": "1",
        "dict_name": "1",
        "dict_pid": null,
        "dict_status": 1,
        "dict_remark": null
      }, {
        "dict_id": 53,
        "dict_code": "1",
        "dict_name": "1",
        "dict_pid": null,
        "dict_status": 1,
        "dict_remark": null
      }, {
        "dict_id": 54,
        "dict_code": "1",
        "dict_name": "1",
        "dict_pid": null,
        "dict_status": 1,
        "dict_remark": ""
      }, {
        "dict_id": 55,
        "dict_code": "dbhasuiuh",
        "dict_name": "测试字典1",
        "dict_pid": null,
        "dict_status": 1,
        "dict_remark": "备注"
      }],
      "totalCount": 11,
      "pageNo": 1,
      "pageSize": 10,
      "totalTag": 1
    }
    {
      "success": true,
      "code": "200",
      "message": "查询成功",
      "data": [{
        "item_id": 2,
        "dict_id": 1,
        "item_text": "外部",
        "item_value": "2",
        "item_status": 1,
        "item_sort": 2,
        "item_remark": null,
        "item_checked": 1,
        "editable": 0 // 写死就行了  一定要有  用于内部表格编辑功能
      }, {
        "item_id": 1,
        "dict_id": 1,
        "item_text": "内部",
        "item_value": "1",
        "item_status": 1,
        "item_sort": 1,
        "item_remark": "1",
        "item_checked": 1,
        "editable": 0
      }]
    }

     

    展开全文
  • ant design vue表格编辑

    2020-08-11 14:59:26
    ant design vue表格编辑 columns里 {title: '操作', dataIndex: 'action', fixed: 'right', align: 'center', width: 120, scopedSlots: { customRender: 'action' } } template里 <div slot="action" slot-...

    在这里插入图片描述
    columns里

    {title: '操作', dataIndex: 'action', fixed: 'right', align: 'center', width: 120, scopedSlots: { customRender: 'action' } }
    

    template里

     <div slot="action" slot-scope="text,record">
            <a @myEvent="refresh" @click="edit(record)">编辑</a>
    

    slot里面的action对应customRender: 'action’就可以啦,第一次写,写的不对可以联系我哦

    展开全文
  • 一个简单的需求:直接编辑表格中的内容,比如顺序号这一项 但始终无法编辑,查了好久终于发现问题出在表格绑定的数组 data 上,它不是响应式的 const data = [ { key: '1', name: 'John Brown', age: 32 }, { key:...
  • element vue 表格编辑

    2019-03-25 16:12:00
    https://xuliangzhan.github.io/vue-element-extends/#/editable/click1 转载于:https://www.cnblogs.com/Quxiya/p/10594371.html
  • 1、参照官网根据自己需要添加可编辑单元格组件 新建EditableCell.vue <template> <div class="editable-cell"> <div v-if="editable && isEditable" class="editable-cell-input-wrapper"&...
  • tableData赋值后不可编辑,没有set、set、set、get属性,但是值有变化 要在赋值的数值上操作 <script> export default { data () { return { formModel: { name: '', pwd: '' } } }, methods: { ...
  • vue element项目常见实现表格内部可编辑功能

    万次阅读 多人点赞 2019-04-09 17:36:38
    后台系统都是各种表格表单编辑,整理了下常见的几种实现表格编辑的方式,希望有用。使用框架:vue+element 正文 简单表格行内内部可编辑,原理就是span 和 input 的切换显隐。 代码: <template> <div&...
  • vue 表格内显示图片

    千次阅读 2020-03-19 00:11:41
    <el-table-column header-align="center" align="center" label="店铺LOGO"> <template width="40" slot-scope="scope"> <el-image :src="url" style="width: 100px; height: 100px" ...
  • vue编辑表格

    2018-10-25 14:03:36
    基于vue的可编辑表格 很多时候我们需要直接编辑表格内容,这个组件刚好解决了需求
  • 编辑状态下,表格可以编辑。但是点击“确认”或者“取消”按钮,列数据编辑状态已经修改,但是视图没有改变。 页面代码: 获取当前行的index,并直接修改当前行用于判断是否编辑状态的数据为false(不可编辑); ...
  • 编辑的时候先把数据存起来 // 编辑 edit(key) { const newData = [...this.data] const target = newData.filter(item => key === item.key)[0] this.editingKey = key if (target) { // 把target 存入...
  • <template> <div class="app-container"> <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%"> <el-table-column align="center" ...
  • vue表格插件

    千次阅读 2020-06-15 02:01:17
    一个全功能的 Vue 表格,满足绝大部分对 Table 的一切需求,与任意组件库完美兼容,官方文档 2.SpreadJS 纯前端表格控件 ,全面支持Vue 官方 3.vue-easytable 基于 vue2.x 的table组件 官方文档 4.vuetable-2 (使用...
  • vue表格静态

    千次阅读 2019-07-16 21:03:34
    vue+element的静态表格,可直接复用更改为自己想要的样式。 1)界面如下: 2)代码如下: <template> <div class="scene-container"> <el-card class="card1"> <el-form :inline=...
  • Vue表格table双击改变编辑事件

    千次阅读 2020-02-23 22:31:18
    //表格也可以写成原生的table <el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit"> <el-table-column property="order1" label="顺序"></el-tabl...
  • vue实现表格行内编辑

    2021-05-10 20:38:26
    添加数据 提交 {{ scope.row.name }} 男 女 男 女 保存 编辑 删除
  • 基于: Vue编辑表格的实现——单元格编辑表格. 1.创建新的组件如下图,并在table.vue示例页引入 只编辑一个单元格,可以通过确定唯一的id值实现, 在edit-table-mul中 2.创建一个新的字段insideData data () { ...
  • vue中可编辑树状表格的代码如下所示: html代码 row-key=id tree-props={children:> 姓名> <el-input placeholder=请输入内容 v-show=scope.row.show v-model=scope.row.labe
  • vue table表格行内编辑

    千次阅读 2019-12-23 20:16:11
    // 表格显示的数据 tableData: [], listQuery: { page: 1, // 当前页数 pageSize: 10, // 每页显示条目个数 total: 0 // 总条目数 }, col: [ { index: 'words', width:600, name: '禁用词', slot: true },...
  • vue bootstrap动态表格编辑代码 vue基于bootstrap制作动态表格添加删除行列表和编辑修改行内容效果代码。 演示地址 下载地址
  • (可能这应该是目前最优的一种实现方式了吧)Vue + ElementUI 2.x 实现的可编辑表格组件,支持渲染任意组件、动态列,增删改查等操作;保持 ElTable 一致的风格,弥补了 ElTable 可编辑表格功能的不足,兼容 ElTable...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,414
精华内容 3,765
关键字:

vue表格内编辑

vue 订阅