UI框架系列-table

羽玉 - 2022-02-16 13:54:53

一、自定义表格表头

在开发过程中，会遇到需要在表头添加图标样式的场景，通过slot可以实现添加表头样式。

<template>
  <el-table
    :data="tableData"
    >
    <el-table-column v-for="(item, i) in header" :prop="item.column" :label="item.label">
       <template v-slot:header>
        <div >
          <span>{{item.label}}</span>
          <i ></i>
         </div>
      </template>
    </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 弄'
        }],
        header: [{
          column: 'date',
          label: '时间'
        }, {
          column: 'name',
          label: '姓名'
        }, {
          column: 'address',
          label: '日期'
        }],
        search: ''
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
</script>

实现效果：

二、表格右侧固定

循环遍历表格时，不能单独给列添加固定属性fixed，因此可以通过prop结合fixed来设置。

fixed：列是否固定在左侧或者右侧，true 表示固定在左侧，false 则表示不固定
fixed：可选值 true, left, right

<el-table-column v-for="(item, i) in header" :prop="item.column" :label="item.label" :fixed="item.column === 'date' ? true : false" :min-width="100">
       <template v-slot:header>
        <div >
          <span>{{item.label}}</span>
          <i ></i>
         </div>
      </template>
    </el-table-column>

效果截图：

三、表格表头筛选功能

table在列中设置filtersfilter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column

<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>

filterHandler(value, row, column) {
  const property = column['property'];
  return row[property] === value;
}

通过设置filters来筛选数据，filter-method方法将筛选的值过滤处理。

但是在业务场景里面，目前table值提供了重置确认两种筛选功能，如果需要数据量过于庞大，则需要添加模糊查询，因此需要自定义筛选组件。

1、定义搜索框

<div >
  <el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="input2">
  </el-input>
</div>

2、定义多选框

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div ></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = [
  {text: '上海', value: '1'},
  {text: '北京', value: '2'},
  {text: '北京', value: '3'},
  {text: '深圳', value: '4'},
  {text: '杭州', value: '5'}];
  export default {
    data() {
      return {
        checkAll: false,
        // 选中的数据
        checkedCities: ['1', '2'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        const checked = this.cities.map(o => o.value)
        this.checkedCities = val ? checked : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

效果截图：

四、table列表多选框

Table-column

type：对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮

HTML：

<el-table
  :data="tableData"
  >
  <el-table-column v-for="(item, i) in header" :prop="item.column" :label="item.label">
     <template v-slot:header>
      <div >
        <span>{{item.label}}</span>
        <i ></i>
       </div>
    </template>
    <template slot-scope="{row, column, $index}">
      <div  v-if="item.column === 'isCheck'">
        <el-checkbox v-model="row.isCheck"></el-checkbox>
       </div>
      <div  v-else>
        <span>{{ row[item.column] }}</span>
       </div>
    </template>
  </el-table-column>
</el-table>

JS代码：

// js
data() {
  return {
    tableData: [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
      isCheck: false
    }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
      isCheck: false
    }, {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄',
      isCheck: false
    }, {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄',
      isCheck: false
    }],
    header: [{
      column: 'date',
      label: '时间'
    }, {
      column: 'name',
      label: '姓名'
    }, {
      column: 'address',
      label: '日期'
    }, {
      column: 'isCheck',
      label: '是否选择'
    }]
  }
}

实现效果：