• element table组件自定义表头


     <el-table
              :data="tableData"
              style=" 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
            >
              <el-table-column
                prop="date"
                label="日期"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                :render-header="renderHeader"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址">
              </el-table-column>
            </el-table>

    js部分

    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 弄'
            }],
        }
    }



    methods: {

    renderHeader(h, { column, $index }) {
    return h('el-checkbox',{
    nativeOn:{
    click:(value) =>{
    // 阻止事件冒泡
    value.stopPropagation()
    },
    change: (value) => {
    // 阻止事件冒泡
    value.stopPropagation()
    // 判断选中
    if(value.target.checked){
    console.log(column,value)
    } else {
    console.log('未选中')
    }
    },
    },
    },[
    h("span", {
    domProps: {
    innerHTML: column.label
    }
    })
    ])
    },
    }
     
     
  • 相关阅读:
    计算机的运算方法
    干货 Elasticsearch 知识点整理 一
    深入理解 Spring finishBeanFactoryInitialization
    Git 学习笔记
    深入理解 Mybatis
    深入理解 MyBatis 启动流程
    MyBatis 开发手册
    深入理解SpringMvc 启动流程
    深度长文回顾web基础组件
    快速排序
  • 原文地址:https://www.cnblogs.com/hpx2020/p/14412670.html
Copyright © 2020-2023  润新知