关于前端:UI框架系列table

一、自定义表格表头

在开发过程中，会遇到须要在表头增加图标款式的场景，通过 slot 能够实现增加表头款式。

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column v-for="(item, i) in header" :prop="item.column" :label="item.label">
       <template v-slot:header>
        <div class="column">
          <span>{{item.label}}</span>
          <i class="el-icon-arrow-down"></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 class="column">
          <span>{{item.label}}</span>
          <i class="el-icon-arrow-down"></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 style="width: 150px">
  <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 style="margin: 15px 0;"></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"
  style="width: 100%">
  <el-table-column v-for="(item, i) in header" :prop="item.column" :label="item.label">
     <template v-slot:header>
      <div class="column">
        <span>{{item.label}}</span>
        <i class="el-icon-arrow-down"></i>
       </div>
    </template>
    <template slot-scope="{row, column, $index}">
      <div class="box" v-if="item.column ==='isCheck'">
        <el-checkbox v-model="row.isCheck"></el-checkbox>
       </div>
      <div class="text" 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: '是否抉择'
    }]
  }
}

实现成果：

结语

成熟的标记，是遇到事，不会沉迷自伶，而是第一工夫解决当下的问题。