el-table表头如何添加筛选功能

最新推荐文章于 2024-06-25 15:52:18 发布

九州白

最新推荐文章于 2024-06-25 15:52:18 发布

阅读量1.7k

点赞数 3

分类专栏： vue 前端文章标签： elementui

本文链接：https://blog.csdn.net/qq_38783557/article/details/112414193

版权

前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

el-table表头添加筛选功能

思路：使用vue的render函数自定义渲染

效果图：
first-image
second-image

思路：使用vue的render函数自定义渲染

上代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
  <!-- 字体 -->
  <link rel="stylesheet" href="https://unpkg.com/browse/element-ui@2.14.1/lib/theme-chalk/fonts/element-icons.ttf">
  <link rel="stylesheet"
    href="https://https://unpkg.com/browse/element-ui@2.14.1/lib/theme-chalk/fonts/element-icons.woff">
  <style>
    /* 自定义样式部分 */
    .el-table th,
    .el-table tr {
      background: #1D2643;
      color: #ccc
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td{
      background: #343C56;
    }
    .el-table td,
    .el-table th.is-leaf {
      border-color: transparent
    }
  </style>

</head>

<body>
  <div id="example">
    <el-table :data="testData" style="width:40%;margin:0 auto">
      <el-table-column prop="name" label="源文件"></el-table-column>
      <el-table-column prop="status" :render-header="renderHeader"></el-table-column>
    </el-table>
  </div>
  <!-- 引入vue文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    const tempObj = {
      options: [{
        label: '所有状态',
        value: '2'
      }, {
        label: '未完成',
        value: '0'
      }, {
        label: '已完成',
        value: '1'
      }],
      colorMap: ['#dd4b39', '#00ff00', '#00a1d6'],
      dataMap: ['未完成', '已完成', '所有状态']
    }
    const app = new Vue({
      el: "#example",
      data() {
        return {
          value: '2',
          label: '所有状态',
          /**这里可以改成其他数据
           * 
           * 比如，从ajax取到的数据
           * **/
          // testData:[],
          testData: [{
            id: 1,
            name: '1.txt',
            status: '已完成'
          }, {
            id: 2,
            name: '2.txt',
            status: '未完成'
          }]
        }


      },
      // mounted() {
      //   this.timer()
      // },
      methods: {
        // timer() {
        // let This = this
        //   $.ajax({
        //     type: 'GET',
        //     url: 'xxxxx',
        //     success(data) {
        //       let json = data
        //       This.testData = json.data
        //       console.log(json)
        //     }

        //   })
        // },
        renderHeader(h, column) {
          let This = this
          let arr = []
          tempObj.options.map((i) => {
            arr.push(h('el-option', {
              domProps: {
                value: i.value
              },
              nativeOn: {
                click: This.handleState
              },
              style: {
                color: tempObj.colorMap[i.value]
              }
            }, i.label))
          })
          return h('div', [
            h('el-select', {
              attrs: {
                value: This.label,
              }
            }, arr)
          ])

        },
        handleState(event) {
          this.value = event.target.value
          this.label = tempObj.dataMap[this.value]
          alert("切换至" + this.label)
        }
      }
    })
  </script>
</body>

</html>