element table 循环渲染动态过滤字段值

最新推荐文章于 2024-05-13 11:52:57 发布

程序媛_panpan

最新推荐文章于 2024-05-13 11:52:57 发布

阅读量496

点赞数

文章标签： javascript html html5 vue.js

本文链接：https://blog.csdn.net/weixin_46186815/article/details/112791769

版权

element table 循环渲染字段映射

html

   <el-table
                        :data="guestDataList"
                        border
                        stripe
                        size="small"
                        :header-cell-style="{background:'#EBF4FF', color:'#000','text-align': 'center'}"
                        style="width: 100%; text-align: center">
                        <el-table-column
                          :prop="item.prop"
                          show-overflow-tooltip
                          :label="item.label"
                          v-for="(item, index) in guestColumnList"
                          :key="index"
                        >
                        <template slot-scope="scope">
                          <span v-if="scope.column.property === 'operator'">{{ scope.row.operator | operatorFilters}}</span>
                          <span v-else-if="scope.column.property === 'startValue'">{{ scope.row | valueFilters}}</span>
                          <span v-else>{{scope.row[scope.column.property]}} </span> 
                        </template>
                        </el-table-column>
                      </el-table>

js

 export default {
    data() {
      return {
      guestColumnList:[
          {
            prop:'metalabelName',
            label:'标签'
          },
          {
            prop:'operator',
            slotName: "handleOpa",
            label:'运算符'
          },
          {
            prop:'startValue',
            label:'值'
          },
        ],
     }
    },
    filters:{
    operatorFilters(v){
      },
      valueFilters(v){
      },
    }
    
  }