element-ui table表格组件的具体使用

element-ui table表格组件的具体使用

el-table的格式:

<el-table>
	<el-table-column>
	</el-table-column>
</el-table>

table表格组件的属性

由于el-table的属性众多这里挑常用的说明一下,其他的参见官方网址:https://element.eleme.cn/#/zh-CN/component/table

Table 属性
:data  							显示的数据(表格中表示的数据)
height							表格的高度(目前常用高度自适应,会随便给一个值但不能没有)
:border  						是否带有纵向边框,true为带有,false为不带有

Table 事件
@selection-change='function'  	                        当选择项发生变化时会触发该事件(会获得选中行的数据作为参数)

Table-column 属性
type							对应列的类型。
							如果设置了 selection 则显示多选框;
							如果设置了 index 则显示该行的索引(从 1 开始计算);
							如果设置了 expand 则显示为一个可展开的按钮
label							显示的标题
prop							对应列内容的字段名,也可以使用 property 属性
width							对应列的宽度
fixed							列是否固定在左侧(left)或者右侧(right),true 表示固定在左侧
show-overflow-tooltip			                当内容过长被隐藏时显示 tooltip(常用,相当与自适应宽度)
align							对齐方式(left/center/right) 默认左对齐

el-table-column中的组件
<template slot-scope="scope"></template>
通过scope可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据不过一般是用来获得row中的数据可以用"{row}"来取代"scope"

表格高度自适应

这里提供一种在配置完.js文件与main.js配置之后只需简单的命令即可实现(可复用性高)

此方法的原作者博客链接:https://juejin.cn/post/6844904153534332935

具体实现步骤如下:

新建包src/util/el-table,创建adaptive.js文件与index.js文件,在main.js进行命令的全局部署,之后在页面中直接调用命令就可以实现表格高度自适应了。

adaptive.js文件

// 设置表格高度
const doResize = async (el, binding, vnode) => {
  // 获取表格Dom对象
  const {
    componentInstance: $table
  } = await vnode
  // 获取调用传递过来的数据 
  const {
    value
  } = binding

  if (!$table.height) {
    throw new Error(`el-$table must set the height. Such as height='100px'`)
  }
  // 获取距底部距离(用于展示页码等信息)
  const bottomOffset = (value && value.bottomOffset) || 30

  if (!$table) return

  // 计算列表高度并设置
  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
  $table.layout.setHeight(height)
  $table.doLayout()
}

export default {
  // 初始化设置
  bind(el, binding, vnode) {
    // 设置resize监听方法
    el.resizeListener = async () => {
      await doResize(el, binding, vnode)
    }
    // 绑定监听方法到addResizeListener
    // addResizeListener(window.document.body, el.resizeListener)
    window.addEventListener('resize', el.resizeListener)
  },
  update(el, binding, vnode) {
    doResize(el, binding, vnode)
  },
  // 绑定默认高度
  async inserted(el, binding, vnode) {
    await doResize(el, binding, vnode)
  },
  // 销毁时设置
  unbind(el) {
    // 移除resize监听
    // removeResizeListener(el, el.resizeListener)
    window.removeEventListener('resize', el.resizeListener)
  }
}

index.js文件

import adaptive from './adaptive'

const install = function(Vue) {   
  // 绑定v-adaptive指令
  Vue.directive('adaptive', adaptive)
}

if (window.Vue) {
  window['adaptive'] = adaptive  
  // eslint-disable-next-line no-undef 
  Vue.use(install)
}

adaptive.install = install

export default adaptive

main.js文件中引入命令

import adaptive from '@/util/el-table'

Vue.use(adaptive)

页面调用命令

<el-table
	ref="table"
	:data="tableData"
	height="100px"							//必写
	v-adaptive="{bottomOffset: 85}"					//调用的命令
>
</el-table>

具体实例

<template>
  <div class="app-container">
    <div class="the-container">
      <el-table
        ref="multipleTable"
        v-adaptive="{bottomOffset: 85}"
        :data="tableData"
        :border="true"
        height="100px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          show-overflow-tooltip
        />
        <el-table-column
          prop="date"
          label="日期"
          show-overflow-tooltip
        />
        <el-table-column
          prop="name"
          label="姓名"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          width="100px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="checkRow(scope)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    checkRow(scope) {
      console.log(scope)
      console.log(scope.row)
    }
  }
}
</script>
<style lang="scss" scoped>
  .app-container{
    height: 100%;
    background-color: #f1f1f1;
  }
  .the-container{
    padding: 20px;
    height: 100%;
    background-color: #fff;
  }
  /*分页组件的布局(右下角)*/
  .page {
    position: relative;
    min-height: 40px;
    padding: 16px 0 0 0;
    .el-pagination {
      position: absolute;
      right: 0;
    }
  }
</style>

map方法

当我想要取一个数组中每一个元素的一个特定字段的数据时,用for遍历并不是很方便,map方法便能轻松解决该问题

当对选中的数据某一个具体字段进行操作时可以用map方法来返回一个新数组,会按照顺序处理元素,但不会对空数组
进行检测,不会改变原始数组。
所以handleSelectionChange可以这样写(批处理操作可以这样用)

handleSelectionChange(val) {
   this.multipleSelection = val.map((item) => {
     return item.name
   })
   console.log(this.multipleSelection)
}
上一篇:创新与山寨


下一篇:HBase基础 | 图数据库HGraphDB介绍