vue+elementui实现表头根据后台数据动态生成字段

思想：需要后台提供表头字段数据，然后循环该数组实现表头动态生成<template><div><el-table class="tb-edit" highlight-current-row :data="tableData" style="width: 100%"&amp

The ever Boy

25034人浏览 · 2018-06-06 15:41:56

The ever Boy · 2018-06-06 15:41:56 发布

思想：需要后台提供表头字段数据，然后循环该数组实现表头动态生成

 
  < 
  template 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  el-table 
  class= 
  "tb-edit" 
  highlight-current-row 
  :data=" 
  tableData" 
  style= 
  "width: 100%" 
  > 
 

 
  < 
  template 
  v-for="( 
  col , 
  index) 
  in 
  cols" 
  > 
 
 
  < 
  el-table-column 
  v-if=" 
  col. 
  type=== 
  'normal'" 
  :prop=" 
  col. 
  prop" 
  :label=" 
  col. 
  label" 
  ></ 
  el-table-column 
  > 
 
 
  < 
  el-table-column 
  v-if=" 
  col. 
  type=== 
  'sort'" 
  :prop=" 
  col. 
  prop" 
  sortable 
  :label=" 
  col. 
  label" 
  > 
 
 
  < 
  template 
  scope= 
  "scope" 
  > 
 
 
  < 
  el-tag 
  type= 
  "primary" 
  >{{ 
  scope. 
  row. 
  type }} 
  </ 
  el-tag 
  > 
 
 
  </ 
  template 
  > 
 
 
  </ 
  el-table-column 
  > 
 
 
  </ 
  template 
  > 
 
 
  </ 
  el-table 
  > 
 
 
  < 
  br 
  >数据:{{ 
  tableData}} 
 
 
  </ 
  div 
  > 
 
 
  </ 
  template 
  > 
 
 
  < 
  script 
  > 
 
 
  export 
  default { 
 
 
  data() { 
 
 
  return { 
 
 
  cols: [ 
 

   { 
  label: 
  "节点编号", 
  prop: 
  "node", 
  type: 
  "normal" }, 
 

   { 
  label: 
  "名称", 
  prop: 
  "name", 
  type: 
  "normal" }, 
 

   { 
  label: 
  "类型", 
  prop: 
  "type", 
  type: 
  "sort" }, 
 

   { 
  label: 
  "坐标", 
  prop: 
  "coordinate", 
  type: 
  "normal" } 
 

   ], 
 
 
  tableData: [ 
 

   { 
 
 
  node: 
  "0051", 
 
 
  name: 
  " 机库顶", 
 
 
  type: 
  "UWB", 
 
 
  status: 
  "正常", 
 
 
  coordinate: 
  "12.21,34.45,34.6" 
 

   }, 
 

   { 
 
 
  node: 
  "0061", 
 
 
  name: 
  "机库门", 
 
 
  type: 
  "GPS", 
 
 
  status: 
  "低电", 
 
 
  coordinate: 
  "45.41,67.45,78.6" 
 

   } 
 

   ] 
 

   }; 
 

   }, 
 
 
  methods: { 
 
 
  handleCurrentChange( 
  row, 
  event, 
  column) { 
 
 
  console. 
  log( 
  row, 
  event, 
  column, 
  event. 
  currentTarget); 
 

   }, 
 
 
  handleEdit( 
  index, 
  row) { 
 
 
  console. 
  log( 
  index, 
  row); 
 

   }, 
 
 
  handleDelete( 
  index, 
  row) { 
 
 
  console. 
  log( 
  index, 
  row); 
 

   } 
 

   } 
 

   }; 
 
 
  </ 
  script 
  > 
 

 
  < 
  style 
  > 
 
 
  .tb-edit .el-input { 
 
 
  display: 
  none; 
 

   } 
 

 
  .tb-edit .current-row .el-input { 
 
 
  display: 
  block; 
 

   } 
 

 
  .tb-edit .current-row .el-input + 
   span { 
 
 
  display: 
  none; 
 

   } 
 
 
  </ 
  style 
  > 
 

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^