Element-ui(筛选功能)

---

前言

记录一些element-ui遇到的bug

---

一、如何在element-ui表格中实现筛选功能？

element-ui自带的筛选功能简直就是

1.我们通过select实现筛选

在某一列的表头中嵌套一个下拉框即可，注意这里的【slot-scope=“scope”】必须写，否则不生效。
实现代码如下：

<template>
  <div class="app-container">
    <el-table
      :data="tableData2"
      style="width: 100%;"
      border
      height="300"
    >
      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <span> 日期 </span>
          <el-select
            v-model="headerSelected"
            @change="headerChanged"
          >
            <el-option
              v-for="item in headerSelect"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"
      />
      <el-table-column
        prop="address"
        label="地址"
        align="center"
      />
    </el-table>
  </div>
</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 弄'
      }],

      headerSelect: [{
        text: '全部',
        value: 'all'
      }, {
        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'
      }],

      tableData2: [],
      headerSelected: 'all'
    }
  },
  created() {
    this.tableData2 = this.tableData
  },
  methods: {
    headerChanged(val) {
      if (val === 'all') {
        this.tableData2 = this.tableData
      } else {
        this.tableData2 = this.tableData.filter(item => {
          return item.date.indexOf(val) > -1
        })
      }
    }
  }
}
</script>

如果你有后端配合的话就不需要tableData2了 通过改变选择框绑定的数据调用接口即可

注意这里可能会出现bug
element 表格表头插槽 dom不响应数据更新

通过在表头加key进行刷新成功解决
<el-table-column width="300" :key="this.overview">

2.使用 element-ui 的 Dropdown 下拉菜单组件来实现

通过组件 slot 来设置下拉触发的元素以及需要通过具名 slot 为 dropdown 来设置下拉菜单。默认情况下，下拉按钮只要 hover 即可，无需点击也会显示下拉菜单，这里我们设置成点击触发（trigger=“click”）。
实现方式如下：

<template>
  <div class="app-container">
    <el-table
      :data="tableData2"
      style="width: 100%;"
      border
      height="300"
    >
      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <el-dropdown trigger="click" @command="handleCommand">
            <span>日期（{{ command }}）<i class="el-icon-arrow-down el-icon--right" /></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="item in headerSelect"
                :key="item.value"
                :command="item.text"
              >
                {{ item.text }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"
      />
      <el-table-column
        prop="address"
        label="地址"
        align="center"
      />
    </el-table>
  </div>
</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 弄'
      }],

      headerSelect: [{
        text: '全部',
        value: 'all'
      }, {
        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'
      }],

      tableData2: [],
      command: '全部'
    }
  },
  created() {
    this.tableData2 = this.tableData
  },
  methods: {
    handleCommand(command) {
      this.command = command
      if (command === '全部') {
        this.tableData2 = this.tableData
      } else {
        this.tableData2 = this.tableData.filter(item => {
          return item.date.indexOf(command) > -1
        })
      }
    }
  }
}
</script>

---

总结

至于第一种出现bug没有更新dom的原因，还未确定，需要探索。但是加上key后不影响使用