在element-ui表格中遍历表头数据和表格数据的方法

html部分:

    

              class="customer-table"

              :header-cell-style="{ background: 'linear-gradient(to top, #141622, #30344B)' }"

              :row-style="{ border: 'none' }"

              :row-class-name="tableRowClassName"

              size="small"

              style="width: 100%">

      

                       :key="index"

                       :show-overflow-tooltip="true"

                       :prop="item.prop"

                       :width="item.width"

                       align="center"

                       :label="item.title">

        

          

               class="yingyong">

            

               :key="index">{{index+1 +  '、'+item2 }}  

            

          

          

               class="caozuo">

            

               class="iconfont"

               :key="index">{{ item2 }}

            

          

          

            {{ scope.row[item.prop] }}

          

        

        

      

    

    

    

js数据部分:

data () {

    return {

      value: 1,

      options: '',

      tableTitle: [{

        title: "序号",

        prop: "xuhao",

        width: "80%"

      },

      {

        title: "部门名称",

        prop: "name",

        width: "100%"

      },

      {

        title: "所属部门",

        prop: "haoma",

        width: "100%"

      },

      {

        title: "部门状态",

        prop: "gongsi",

        width: "100%"

      },

      {

        title: "创建时间",

        prop: "bumen",

        width: "100%"

      },

      {

        title: "操作",

        prop: "zhanghao",

        width: "100%"

      },

      {

        title: "用户状态",

        prop: "zhuangtai",

        width: "100%"

      },

      {

        title: "可访问应用",

        prop: "yingyong",

        width: "200%"

      },

      {

        title: "有效期",

        prop: "youxiaoqi",

        width: "100%"

      },

      {

        title: "注册时间",

        prop: "zhuceshijian",

        width: "100%"

      },

      {

        title: "操作",

        prop: "caozuo",

        width: "200%"

      }

      ],

      tableData: [{

        xuhao: '1',

        name: '王小虎',

        haoma: '1355555555',

        gongsi: '科比特',

        bumen: '研发部',

        zhanghao: '123456',

        zhuangtai: '有效',

        yingyong: ["电力", "风力", "火力"],

        youxiaoqi: "2016-05-04",

        zhuceshijian: "2016-05-04",

        caozuo: ['\ue626', '\ue625', '\ue628', '\ue629']

      }, {

        xuhao: '1',

        name: '王小虎',

        haoma: '1355555555',

        gongsi: '科比特',

        bumen: '研发部',

        zhanghao: '123456',

        zhuangtai: '有效',

        yingyong: ["电力", "风力", "火力"],

        youxiaoqi: "2016-05-04",

        zhuceshijian: "2016-05-04",

        caozuo: ''

      }, {

        xuhao: '1',

        name: '王小虎',

        haoma: '1355555555',

        gongsi: '科比特',

        bumen: '研发部',

        zhanghao: '123456',

        zhuangtai: '有效',

        yingyong: ["电力", "风力", "火力"],

        youxiaoqi: "2016-05-04",

        zhuceshijian: "2016-05-04",

        caozuo: ''

      }, {

        xuhao: '1',

        name: '王小虎',

        haoma: '1355555555',

        gongsi: '科比特',

        bumen: '研发部',

        zhanghao: '123456',

        zhuangtai: '有效',

        yingyong: ["电力", "风力", "火力"],

        youxiaoqi: "2016-05-04",

        zhuceshijian: "2016-05-04",

        caozuo: ''

      }, {

        xuhao: '1',

        name: '王小虎',

        haoma: '1355555555',

        gongsi: '科比特',

        bumen: '研发部',

        zhanghao: '123456',

        zhuangtai: '有效',

        yingyong: ["电力", "风力", "火力"],

        youxiaoqi: "2016-05-04",

        zhuceshijian: "2016-05-04",

        caozuo: ''

      }, {

        xuhao: '1',

        name: '王小虎',

        haoma: '1355555555',

        gongsi: '科比特',

        bumen: '研发部',

        zhanghao: '123456',

        zhuangtai: '有效',

        yingyong: ["电力", "风力", "火力"],

        youxiaoqi: "2016-05-04",

        zhuceshijian: "2016-05-04",

        caozuo: ''

      }, {

        xuhao: '1',

        name: '王小虎',

        haoma: '1355555555',

        gongsi: '科比特',

        bumen: '研发部',

        zhanghao: '123456',

        zhuangtai: '有效',

        yingyong: ["电力", "风力", "火力"],

        youxiaoqi: "2016-05-04",

        zhuceshijian: "2016-05-04",

        caozuo: ''

      }, {

        xuhao: '1',

        name: '王小虎',

        haoma: '1355555555',

        gongsi: '科比特',

        bumen: '研发部',

        zhanghao: '123456',

        zhuangtai: '有效',

        yingyong: ["电力", "风力", "火力"],

        youxiaoqi: "2016-05-04",

        zhuceshijian: "2016-05-04",

        caozuo: ''

      }, {

        xuhao: '1',

        name: '王小虎',

        haoma: '1355555555',

        gongsi: '科比特',

        bumen: '研发部',

        zhanghao: '123456',

        zhuangtai: '有效',

        yingyong: ["电力", "风力", "火力"],

        youxiaoqi: "2016-05-04",

        zhuceshijian: "2016-05-04",

        caozuo: ''

      }, {

        xuhao: '10',

        name: '王小虎',

        haoma: '1355555555',

        gongsi: '科比特',

        bumen: '研发部',

        zhanghao: '123456',

        zhuangtai: '有效',

        yingyong: ["电力", "风力", "火力"],

        youxiaoqi: "2016-05-04",

        zhuceshijian: "2016-05-04",

        caozuo: ''

      }

      ],

    }

  },

其中 scope.row表示:data="tableData"

你可能感兴趣的:(在element-ui表格中遍历表头数据和表格数据的方法)