elementUI的el-tree，el-table和el-pagination，el-radio之魔改篇

1.el-tree

html
<div class="column">
        <div class="column_search">
          <el-input class="input_style" v-model="filterWord" placeholder="搜索" size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="column_tree">
          <el-tree :data="tree" :props="defaultProps" :expand-on-click-node="false" ref="tree"
            :filter-node-method="filterNode" @node-click="handleNodeClick" node-key="id"
            :default-expanded-keys="treeExpandData" />
        </div>
      </div>

script
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        filterWord: '',
        tree: [{
          id: 1,
          label: '首页',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '人员管理',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '车辆管理',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        treeExpandData: [],
        defaultProps: {
          children: "children",
          label: "label",
        },
      }
    },
    created() {

    },
    watch: {
      filterWord(val) {
        this.$refs.tree.filter(val);
      }
    },
    mounted() {

    },
    methods: {
      //tree的关键字过滤
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      //tree的点击
      handleNodeClick(row) {
        console.log(row.id)
      },
    }
  })
</script>

css
     
/* 修改el-tree样式 */
.el-tree {
  background: none !important;
  color: #A5CAE7 !important;
  font-size: 0.21875rem !important;
}

.el-tree-node:focus>.el-tree-node__content {
  background-image: linear-gradient(to right, #4491F9, #43BFFF) !important;