登录
当前位置： 首页 > 工具软件 > Input-data-formatter > 使用案例 >

Data-table表格

岳阳飙
2023-12-01

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

1、基础表格
当el-table元素中注入data对象数组后（多行数据存成一维数组格式，但每一行数据存成对象，每一行的数据格式键名要相同，不能处理成多维数组的格式，prop属性可以动态绑定），
在el-table-column中用prop属性来对应对象中的键名即可填入数据，
用label属性来定义表格的列名。可以使用width属性来定义列宽。
默认情况下，Table 组件是不具有竖直方向的边框的（只有横向），如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。

  <el-table
    :data="tableData"
    style="width: 80%"
    border>
    <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>
<script>
  new Vue({
    el: '#app',
    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>
<!--带状态表格
可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。
可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
  -->

  <el-table
    :data="tableData2"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <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>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<script>
  new Vue({
    el: '#app',
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData2: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  })
</script>

3、fixed属性

横向内容过多时，可选择固定列。（该列数据会一直可见显示）
固定列需要使用fixed属性，它接受 Boolean 值或者left，right，表示左边固定还是右边固定。

4、

<!--当数据量动态变化时，可以为 Table 设置一个最大高度。
通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。-->

<el-table
  :data="tableData4"
  style="width: 100%"
  max-height="250">
  <el-table-column
    fixed
    prop="date"
    label="日期"
    width="150">
  </el-table-column>
  <el-table-column
    fixed="right"
    label="操作"
    width="120">
    <template slot-scope="scope">
      <el-button
        @click.native.prevent="deleteRow(scope.$index, tableData4)"
        type="text"
        size="small">
        移除
      </el-button>
    </template>
  </el-table-column>
</el-table>
methods: {
  deleteRow(index, rows) {
    rows.splice(index, 1);
  }
}
<!--选择单行数据时使用色块表示。
Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发
的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可
显示从 1 开始的索引号。
-->

<el-table
  ref="singleTable"
  :data="tableData"
  highlight-current-row
  @current-change="handleCurrentChange"
  style="width: 100%">
  <el-table-column
    type="index"
    width="50">
  </el-table-column>
  <el-table-column
    property="date"
    label="日期"
    width="120">
  </el-table-column>
  <el-table-column
    property="name"
    label="姓名"
    width="120">
  </el-table-column>
  <el-table-column
    property="address"
    label="地址">
  </el-table-column>
</el-table>
<div style="margin-top: 20px">
  <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
  <el-button @click="setCurrent()">取消选择</el-button>
</div>
<script>
  new Vue({
    el: '#app',
    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 弄'
        }],
        currentRow: null
      }
    },

    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(curRowObj) {
        this.currentRow = curRowObj;
      }
    }
  })
</script>

<!--选择多行数据时使用 Checkbox。
实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；
默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在
hover 时以 tooltip 的形式显示出来。
selection-change 当选择项发生变化时会触发该事件
-->

<el-table
  ref="multipleTable"
  :data="tableData3"
  tooltip-effect="dark"
  style="width: 100%"
  @selection-change="handleSelectionChange">
  <el-table-column
    type="selection"
    width="55">
  </el-table-column>
  <!--与使用prop效果一样-->
  <el-table-column
    label="日期"
    width="120">
    <template slot-scope="scope">{{ scope.row.date }}</template>
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    width="120">
  </el-table-column>
  <el-table-column
    prop="address"
    label="地址"
    show-overflow-tooltip
    width="240">
  </el-table-column>
</el-table>
<div style="margin-top: 20px">
  <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
  <el-button @click="toggleSelection()">取消选择</el-button>
</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData3: [{
          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 弄'
        }],
        multipleSelection: []
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  })
</script>
<div id="app">
  <!--对表格进行排序，可快速查找或对比数据。
  在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置
默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同
时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，
我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。
  -->

  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}"
  >
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  </el-table>
<script>
  new Vue({
    el: '#app',
    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 弄'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address + column.label;
      }
    }
  })
</script>
<!--对表格进行筛选，可快速查找到自己想看的数据。
在列中设置filtersfilter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，
它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。
column-key column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件
filters  数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。
filter-method  数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。  Function(value, row, column)
filter-placement 过滤弹出框的定位 String 与 Tooltip 的 placement 属性相同
-->

<el-button @click="resetDateFilter">清除日期过滤器</el-button>
<el-button @click="clearFilter">清除所有过滤器</el-button>
<el-table
  ref="filterTable"
  :data="tableData"
  style="width: 100%">
  <el-table-column
    prop="date"
    label="日期"
    sortable
    width="180"
    column-key="date"
    :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
    :filter-method="filterHandler"
  >
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    width="180">
  </el-table-column>
  <el-table-column
    prop="address"
    label="地址"
    :formatter="formatter">
  </el-table-column>
  <el-table-column
    prop="tag"
    label="标签"
    width="100"
    :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
    :filter-method="filterTag"
    filter-placement="bottom-end">
    <template slot-scope="scope">
      <el-tag
        :type="scope.row.tag === '家' ? 'primary' : 'success'"
        disable-transitions>{{scope.row.tag}}</el-tag>
    </template>
  </el-table-column>
</el-table>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: '家'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: '公司'
        }]
      }
    },
    methods: {
      resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }
    }
  })
</script>
<!--自定义列模板
自定义列的显示内容，可组合其他组件使用。
  通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
  -->

  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<script>
  new Vue({
    el: '#app',
    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 弄'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  })
</script>
<!--当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，
展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。
  -->

  <el-table
    :data="tableData5"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="商品 ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="name">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="desc">
    </el-table-column>
  </el-table>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData5: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
      }
    }
  })
</script>
<!--通过设置 Scoped slot 来自定义表头。-->

<el-table
  :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
  style="width: 100%">
  <el-table-column
    label="Date"
    prop="date">
  </el-table-column>
  <el-table-column
    label="Name"
    prop="name">
  </el-table-column>
  <el-table-column
    align="right">
    <template slot="header" slot-scope="scope">
      <el-input
        v-model="search"
        size="mini"
        placeholder="输入关键字搜索"/>
    </template>
    <template slot-scope="scope">
      <el-button
        size="mini"
        @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
      <el-button
        size="mini"
        type="danger"
        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
    </template>
  </el-table-column>
</el-table>
<script>
  new Vue({
    el: '#app',
    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 弄'
        }],
        search: ''
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  })
</script>

 

<!--多行或多列共用一个数据时，可以合并行或列。
通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。-->

<div>
  <el-table
    :data="tableData6"
    :span-method="arraySpanMethod"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="数值 1">
    </el-table-column>
    <el-table-column
      prop="amount2"
      sortable
      label="数值 2">
    </el-table-column>
    <el-table-column
      prop="amount3"
      sortable
      label="数值 3">
    </el-table-column>
  </el-table>

  <el-table
    :data="tableData6"
    :span-method="objectSpanMethod"
    border
    style="width: 100%; margin-top: 20px">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="amount1"
      label="数值 1（元）">
    </el-table-column>
    <el-table-column
      prop="amount2"
      label="数值 2（元）">
    </el-table-column>
    <el-table-column
      prop="amount3"
      label="数值 3（元）">
    </el-table-column>
  </el-table>
</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData6: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  })
</script>

Table Attributes

参数说明类型可选值默认值
：data显示的数据array（元素一般为对象格式）——
border是否带有纵向边框boolean—false
：row-class-name行的 className 的回调方法（返回一个字符串对应某个样式名，比如返回warning-row对应，.el-table .warning-row
），也可以使用字符串为所有行设置一个固定的 className。		Function({row, rowIndex})/String——
height

Table 的高度，默认为自动高度。如果 height 为 number 类型（比如250），单位 px；

纵向内容过多时，可选择固定表头。(出现滚动条，表头会一直出现在视野)
只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码

string/number——
max-heightTable 的最大高度（数据量动态变化时使用）string/number——
highlight-current-row是否要高亮当前行，该属性用于实现单选，配合current-change事件boolean—false
：default-sort默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序Objectorder: ascending, descending如果只指定了prop, 没有指定order, 则默认顺序是ascending
tooltip-effecttooltip effect 属性，单行显示内容配合show-overflow-tooltip属性使用Stringdark/light 
show-summary是否在表尾显示合计行Boolean—false
：summary-method自定义的合计计算方法Function({ columns, data })——
：span-method合并行或列的计算方法Function({ row, column, rowIndex, columnIndex })——

Table Events

事件名说明参数
@selection-change当选择项发生变化时会触发该事件（用于表哥多选时）selection
@current-change用于实现单选。当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性currentRow, oldCurrentRow

Table Methods

方法名说明参数
clearSelection用于多选表格，清空用户的选择—
toggleRowSelection用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）row, selected
setCurrentRow用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。row
clearFilter不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件columnKey

Table-column Attributes

参数说明类型可选值默认值
label显示的标题（表格第一行显示的th标题）string——
prop对应列内容的字段名（绑定到列数据对象中的键名）string——
width对应列的宽度string——
type对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮stringselection/index/expand—
column-keycolumn 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件string——
fixed列是否固定在左侧或者右侧，true 表示固定在左侧string, booleantrue, left, right—
sortable对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件boolean, stringtrue, false, 'custom'false
：formatter用来格式化内容Function(row, column, cellValue, index)——
show-overflow-tooltip当内容过长被隐藏时显示 tooltipBoolean—false
align对齐方式Stringleft/center/rightleft
：filters数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。Array[{ text, value }]——
filter-placement过滤弹出框的定位String与 Tooltip 的 placement属性相同—
：filter-method数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。Function(value, row, column)——

Table-column Scoped Slot

name说明
—<template slot-scope="scope">自定义列的内容，参数为 { row, column, $index }
header（<template slot="header" slot-scope="scope">）自定义表头的内容. 参数为 { column, $index }

      <template slot-scope="props"> 通过设置 type="expand" 和 Scoped slot 可以开启展开行功能

实例 

//1.切换行的样式
:row-class-name="tableRowClassName"
<script> 
   tableRowClassName({ row, rowIndex }) {
      if (row.lock_status == 0) {//eslint-disable-line
        return 'lock-row'
      }
    }
<style>
  .el-table .lock-row {
    background: #80808021;
  }
</style>
</script>
//2.控制表头的样式
:header-cell-style="rowClass"
<script>
    rowClass({ row, column, rowIndex, columnIndex }) {
      return 'text-align: center;'
    },
</script>
//3、控制单元格的样式
:cell-style="cellStyle"
<script>
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return 'text-align: center;'
    }
</script>

 

 

 类似资料：

相关阅读

jQuery对table表格进行增删改查ASP.NET Table 表格控件的使用方法js处理表格对table进行修饰AngularJS中table表格基本操作示例asp.net中Table生成Excel表格的方法

相关文章

SQL ALTER TABLESQL DROP TABLESQL CREATE TABLEPostgreSQL ALTER TABLE 命令Flink-Sql和Table Api-3

相关问答

后端 - MySQL 8.0 ALTER TABLE会锁表吗?javascript - el-table表格滚动条拖拽会回退?javascript - el-table表格数据状态怎么转换？vue.js - （树形表格&&展开行表格）Vue + vxe-table 特殊表格如何实现?使用spring data jpa联合表

相关文档

Spring Data 文档Spring Data Elasticsearch 中文版TiDB Data Migration 用户文档WeBankBlockchain-Data 技术文档 v1.7.2Navicat Data Modeler for Windows 用户指南
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.