精华内容
下载资源
问答
  • vuetable-数据表简化! 无需自己渲染表格 一个简单的vuetable标签 显示从服务器检索的带有排序选项的数据 通过@balping支持多列排序(v1.2.0) 包括分页组件,可互换和可扩展 定义字段以映射您的JSON数据结构 定义...
  • Vuetable-2-数据表简化! Vuetable-2 v2.0-beta现已上市! 请参阅分支。 Vuetable-2适用于Vue 2.x,vuetable适用于Vue 1.x 如果您正在寻找适用于Vue 1.x的版本,请转到 。 文档和教程 文档仍在开发中,但是您可以...
  • 今天小编就为大家分享一篇对Vue table 动态表格td可编辑的方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • ant-design-vue版本:~1.3.8 需求:表格实现跨行合并,并且在合并完的单元格中显示图片 效果图: 源码: export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/...
  • 主要介绍了VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新),本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
  • Tabler图标作为Vue组件 预览图标 安装 yarn add vue-tabler-icons # or npm i vue-tabler-icons 用法 < script > // MyComponent.vue import { BoldIcon } from 'vue-tabler-icons' ; export default { ...
  • 主要介绍了vxe-table vue table 表格组件功能,功能非常强大,文中给大家提到了功能点,需要的朋友可以参考下
  • vue table表格自定义

    2021-02-19 16:53:30
    刚接了一个新需求 ,自定义表格的行和列,没有想到好的实现方法,就用原生table写了一个,直接上代码: 先给大家展示一下效果: 下面直接上代码: <el-button style="margin-left: 10px; float: right;" ...

     刚接了一个新需求  ,自定义表格的行和列,没有想到好的实现方法,就用原生table写了一个,直接上代码:

    先给大家展示一下效果:

     下面直接上代码:

    <el-button style="margin-left: 10px; float: right;" size="small" @click="refresh">重置</el-button>
    <table>
          <template v-for="(item,index) in tableProDate">
              <tr>
                <template v-for="inx in cellLength">
                  <td>
                    <el-input style="width:100px;" v-model="item['tagCell'+''+inx]" size="small" :placeholder="item.placeholder" clearable> </el-input>
                  </td>
               </template>
               <el-button v-if="index == 0" style="border-style: dashed;margin-top: 10px;" size="small"  @click="addCell()">添加列</el-button>
               <el-button v-else style="border-style: dashed;margin-top: 10px;" size="small" @click="delRow(index)">删除行</el-button>
              </tr>
            </template>
            <el-button style="border-style: dashed;margin-top: 10px" size="small" @click="addRow()">添加行</el-button>
          </table>

    定义一个 tableProDate 数组,这个数组为整个表格的数据,tagCellObj为一行数据的对象,通过Object.keys(this.tagCellObj).length来获取对象的长度来进行列的添加操作。

     

    export default {
        name: "performance",
        mixins: [dialogsMixins,inquiryMixins],
        data () {
          return {
            tagCellObj:{ 
              tagCell1:'',
            },
            tableProDate:[
              {
                tagCell1:'',
                placeholder:'表头内容'
              },
            ],
            cellLength:1,
          }
        },
        methods: {
          refresh(){  //重置
            this.cellLength = 1
            this.tableProDate.length = 0
             this.tableProDate.push({
                tagCell1:'',
                placeholder:'表头内容'
              })
            this.tagCellObj = {
              tagCell1:'',
            }
          },
          addRow(){   //添加行
            let param = Object.assign({},this.tagCellObj,{placeholder:'内容'})
            this.tableProDate.push(param)
          },
          delRow(index){  //删除行
            this.tableProDate.splice(index,1)
          },
          addCell(){   //添加列
            this.cellLength = Object.keys(this.tagCellObj).length +1
            if( this.cellLength==6){
              return
            }
             let lable = 'tagCell'+this.cellLength
            this.tableProDate.map((item,index)=>{
              this.$set(item,lable, '');
              if(index==0){
                item.placeholder = '表头内容'
              }else{
                 item.placeholder = '内容'
              }
            })
            this.$set(this.tagCellObj,lable, '');
          }
        }
      }

    如果有其他好的实现方法请推荐一下,继续学习。。。

     

     

    展开全文
  • 我的项目 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
  • vue各种table切换

    2019-03-04 09:15:14
    该文件主要基于vue。js下的各种table切换效果以及不同功能的实现
  • 主要介绍了Vue实现table上下移动功能,结合实例形式分析了vue.js针对table表格元素动态操作相关实现技巧,需要的朋友可以参考下
  • 今天小编就为大家分享一篇解决vue 表格table列求和的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 最近做的一个项目是基于 vue + AntDesign 的。由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单。在线演示地址及最终效果图如下: 在线演示地址>>   首先新建一个Table组件的实例: <a> { return ...
  • Vue table及作用域插槽

    2020-11-23 10:32:32
    el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180">&...

    示例代码:

    <template>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
    
        <el-table :data="tableData" style="width: 100%">
          <el-table-column v-for="(val,key) in tableLable" :label="val" :key="key" :prop="key" width="180"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100" v-if="isShowOp">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            isShowOp: true,
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }],
            tableLable: {
              date: '日期',
              name: '姓名',
              address: '地址'
            }
          }
        },
        methods:
          {
            handleClick (index, row) {
              console.log(index + '  ' + row.name)
            }
          }
      }
    </script>
    
    展开全文
  • ant design vue table表内换行

    千次阅读 2021-04-13 10:37:43
    ant design vue table 表内换行方法 使用customRender完成表内换行 template 无需特殊操作,如下: <template> <a-table :columns="columns" :data-source="data"> </a-table> </template&...

    ant design vue table 表内换行方法

    使用customRender完成表内换行

    • template 无需特殊操作,如下:
    <template>
      <a-table :columns="columns" :data-source="data">
      </a-table>
    </template>
    • 在表格columns中定义表头如下:
    data() {
      return {
        data: [],
        columns: [
          {
            title:'测试',
            align: 'center',
            dataIndex: 'test'
            customRender: (text, record, index) => {
    	  // 例如:text = [1, 2, 3, 4]
    	  const textArr = text.split(',')
    	  return (<div>
    	    {
    	      textArr.map(t => {
    	        return (<li>{t}</li>)
    	      })
    	    }
    	  </div>)
            }
          }
        ]
      }
    }

    ant design vue : 官网.

    如有更好的办法,欢迎留言讨论!!!

    展开全文
  • vue-pivot-table数据透视表Live演示(jsfiddle)的vue组件安装npm install --save @ marketconnect / vue-pivot-table组件此项目vue-pivot-table数据透视表Live演示(jsfiddle)的vue组件npm install --save @ ...
  • 为什么我同样的功能要用react 、vue 都写一遍 ? 啊我真是不是闲的蛋疼啊(~ o ~)~zZ 在 ant design vue 中,表格的第一列是联动的选择框 截一张官方文档图,图示最后一排就是禁用状态 点击 checkbox 会触发...
  • a-table size="small" bordered rowKey="id" row-selection={{ onChange: this.handleSelectChange.bind(this), getCheckboxProps: record => { return { props: { defaultChecked: this.selectedRowKeys....

    在 ant-design-vue 中,提供 rowSelection.selectedRowKeys 来控制选中项,同时配合 onChange 使用(选中项发生变化时的回调)。

    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
    />
      ......
    </a-table>

    selectedRowKeys 为选中行的的 rowKey 属性的值;selectedRows 为选中数据的集合;change 回调函数代码如下:

    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },

    注意,在 Table 中,dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。如果你的数据没有这个属性,务必使用 rowKey 来指定数据列的主键。例如:加上rowKey="id"或者rowKey={record => record.id}。若没有指定,控制台会出现缺少 key 的提示,表格组件也会出现各类奇怪的错误。

    那我们如何添加默认选择呢?ant 提供了一个 getCheckboxProps API 用来配置选择框的默认属性。

    defaultChecked 表示表格里包含已选中项的 id,都给默认选中。

    <a-table
      rowKey="id"
      row-selection={{
        onChange: this.handleSelectChange.bind(this),
        getCheckboxProps: record => {
          return {
            props: {
              defaultChecked: this.selectedRowKeys.includes(record.id),
            },
          }
        },
        selectedRowKeys: this.selectedRowKeys }}
      pagination={false}
      data-source={this.tableData}
      columns={columns.call(this, h)}
      {...{ scopedSlots: this.scopedSlotsList }}
    />

     

     

     

    展开全文
  • vue table中文字 换行

    千次阅读 2020-04-17 15:09:41
    table中文字 换行htmlcss ...table column 中加入 type:html 如: <el-table-column prop="date" type:html label="时间">.../el-table-column> css .el-table .cell{ white-space: pre-line; } ...
  • 主要介绍了Vue filter 过滤器、以及在table中的使用介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue table切换组件

    千次阅读 2018-07-13 14:52:09
    如果vue单页开发没有使用ui组件,table切换的功能还是比较烦人的。闲暇时间看书写了一个table切换的组件,和大家分享一下,效果图如下:主要有两个组件页面,第一个是 tabs.vue,这个页面上会循环出table标签和每个...
  • vue table列表分页

    千次阅读 2018-07-14 16:44:19
    el-table :data="testpage.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%" &gt;  &lt;!-- 要使当页显示分页后的对应数据,其下标应为(当前页-1)*...
  • input中maxlength="xx"方法 输入框最大长度值 align="center" 标题和值居中 fixed="right" 列固定在右边 :show-overflow-tooltip="true" 值过多 省略号 待补充...
  • 在使用vue制作表格时,让我感到很痛苦,因为本生对前端不熟悉,render的方式我也习惯,特别是在一行上如果所需操作多的话,简直让我痛不欲生。...2. vue table加slot ,还是要用到render https://ru...
  • vue table表格新增添加一行数据

    万次阅读 2019-11-21 10:11:52
    表格样式并不能是难点 主要是点击新增按钮和删除按钮自增的... <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#3d80f2',color:'#fff',fontSize:'16px',height:'55px'...
  • vue table默认选中事件

    千次阅读 2019-08-13 17:27:48
    watch:{ templeData(n,o){ // console.log("n:"+JSON.stringify(n)) this.templeData.forEach((ele,indexItem) => { // console.log("indexTtem:"+indexItem) ...// console.log("ele:"+JSON.stringify(ele)) ...
  • 又get了一个技能点 ... tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td { background: #fff; } 参考博客:https://blog.csdn.net/weixin_41554281/article/details/103574156
  • 使用customRow 设置行属性,写对应事件 ...补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件 点击行,有一个customRow。可以配置点击事件。 单元格的自定义分为两种方式。 一种是:通过tem

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,336
精华内容 27,734
关键字:

VUEtable