VueJS ElementUI el-table 的 formatter 和 scope template 不能同时存在

解决办法：使用 slot ,自定义 formatter贴代码table -colum 代码如下：<el-table-column :prop="item.label" v-for="item in tableDayItems" :label="item.value"min-width="120" alig

十一/shell

5996人浏览 · 2018-02-24 12:04:43

十一/shell · 2018-02-24 12:04:43 发布

解决办法：
使用 slot ,
自定义 formatter

贴代码

table -colum 代码如下：

   < 
  el-table-column 
  :prop=" 
  item.label" 
  v-for=" 
  item in 
  tableDayItems" 
  :label=" 
  item.value" 
  min-width=" 
  120" 
  align=" 
  center"> 
 

   < 
  template 
  scope=" 
  scope"> 
 

   < 
  span 
  v-html=" 
  dayHourFormatter( 
  scope. 
  row. 
  workHours, 
  item.value)"></ 
  span> 
 

   </ 
  template> 
 

   </ 
  el-table-column> 
 

formatter 代码如下：

 
  dayHourFormatter( 
  workHours, 
  cellValue) { 
 
  let 
  hour = ''; 
 
  for( 
  let 
  i= 
  0; 
  i< 
  workHours.length; 
  i++){ 
 
  if( 
  workHours[ 
  i]. 
  day== 
  cellValue){ 
 
  hour = 
  workHours[ 
  i]. 
  workHourValue; 
 
   } 
 
   } 
 
  return 
  hour; 
 
   },

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}$/, //不连续的两位字母// /^