前言

本文章编写的是elementUI的table相关设置。
用于以后进行参考和使用，我将会把它归置在常用工具栏分栏中；以供后续参考；
如后续有新内容将在本文章进行更新

table设置

最基础的表格代码如下

  <template>
    <el-table
      :data="这里为定义的数组"
      style="width: 100%">
      <el-table-column
        prop="数组底下的属性"
        label="表格标题"
        width="180">
      </el-table-column>
  </template>

例子
界面

  <template>
    <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="地址">
      </el-table-column>
    </el-table>
  </template>

数组数据

  <script>
    export default {
      data() {
        return {
          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 弄'
          }]
        }
      }
    }
  </script>

效果

表格宽度自适应

如果想实现自适应宽度的话，只需要做如下调整

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

设置el-table的宽度width属性为100%,下面的el-table-column不设置宽度即可

设置表格边框

要实现表格边框，在el-table设置属性border即可

  <template>
    <el-table
      :data="tableData"
      style="width: 100%"
      border>
      <el-table-column
        prop="date"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

设置表格固定宽度且省略多余文字

当设置表格为固定宽度的时候，想隐藏多余的文字，如下

  <template>
    <el-table
      :data="tableData"
      style="width: 100%"
      >
      <el-table-column
        prop="date"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :show-overflow-tooltip="true">
      </el-table-column>
    </el-table>
  </template>

在你想要隐藏的栏位进行添加        
:show-overflow-tooltip="true" 
 即可

表格文字居中

要实现表格文字居中，做如下操作

  <template>
    <el-table
      :data="tableData"
      style="width: 100%"
      >
      <el-table-column
        prop="date"
        label="日期"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

在想实现文字居中的栏位使用
align="center"
即可

自定义编写显示表格文本

当想实现自定义编写表格栏位显示的文本内容的时候，你需要先写一个方法，然后把参数传入方法内；
具体操作如下:

  <template>
    <el-table
      :data="tableData"
      style="width: 100%"
      >
      <el-table-column
        prop="date"
        label="日期"
        align="center">
      </el-table-column>
      <el-table-column label="姓名" width="80">
        <template slot-scope="scope">
          {{ method1(scope.row.name) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

在想自定义的地方调用该方法即可;
注意:要自定义文本进行编写方法，必须return一个值出来

例子

method1(name){
	let s = "";
	if (name == "张三") {
		s = "张三";
	} else {
		s = "李四";
	}
	return s;
}

表格添加操作栏位

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="method2(scope.row)" type="text" size="small">操作1</el-button>
        <el-button @click="method3(scope.row)" type="text" size="small">操作2</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>