精华内容
下载资源
问答
  • el-table-column formatter
    2021-10-14 14:01:44
    el-table-column中formatter格式化字典

    • vue 中使用 <el-table-column/> 中的 formatter 格式化内容 🔮

      <template>
        <!-- 列表 -->
      	<el-table :data="list">
          <!-- 需要格式化的内容 -->
          <el-table-column prop="type" label="类型" :formatter="typeFormat">
          </el-table-column>
        </el-table>
      </template>
      <script>
        export default{
          data(){
            return{
              // 表格数据
              list:[],
              // 类型
              typeOptions:[]
            }
          },
          created(){
            this.getList();
            // 查询类型字典
      			this.getDicts('risk_amt_type').then((res) => {
      				this.typeOptions = res.data;
      			});
          },
          methods:{
            // 获取表格数据
            getList(){
              // 后台接收表格数据
              this.list=res.data;
            },
            // 格式化表格内容--类型字典翻译
            typeFormat(row) {
              console.log(row);
      				let type = '';
      				this.typeOptions.forEach(item => {
      					if (row.type == item.dictValue) {
      						type = item.dictLabel;
      					}
      				});
      				return type;
      			},
          }
        }
      </script>
      
    更多相关内容
  • el-table-columnformatter的使用

    千次阅读 2022-02-09 11:06:22
    el-table-column label="性别" align="center" :formatter="gendarFomat"></el-table-column> eg: gendarFomat(row, column) { if (row.gender == 0) { return "女"; } else if (row.gender == 1)

    当后端返回来的数据格式需要再去处理;可以使用formatter属性

     <el-table-column label="性别" align="center" :formatter="gendarFomat"></el-table-column>

    eg:

        gendarFomat(row, column) {
          if (row.gender == 0) {
            return "女";
          } else if (row.gender == 1) {
            return "男";
          } else {
            return "-";
          }
        },

    element-ui官网说明

     

    展开全文
  • <script type="text/javascript"> export default { name: "tableColumn", data() { return { } }, props: { className: { type: String, default: '' },

    组件使用

    <table-column
    	className="inspect-record-table"
    	align="center"
    	:data="tableData"
    	:highlight-current-row="false"
    	:height="tableHeight"
    	:tableHeader="tableHeader"
    >
    </table-column>
    <script type="text/javascript">
      import tableColumn from "./tableColumn";
    </script>
    

    组件定义

    tableColumn.vue

    <script type="text/javascript">
    
        export default {
            name: "tableColumn",
            data() {
              return {
              }
            },
            props: {
              className: {
                type: String,
                default: ''
              },
              align: {
                type: String,
                default: ''
              },
              data: {
                type: Array,
                default: function() {
                  return []
                }
              },
              height: {
                type: Number|String,
              },
              highlightCurrentRow: {
                type: Boolean,
                default: false
              },
              tableHeader: {
                type: Array,
                default: function() {
                  return []
                }
              },
            },
            render(h) {
              return h('el-table',
                {
                  class: this.className,
                  attrs: {
                    data: this.data,
                    height: this.height,
                    'highlight-current-row': this.highlightCurrentRow,
                  },
                  on: {
    
                  }
                }, [
                  this.tableHeader.map((item, index) => {
                    return h('el-table-column', {
                      // inheritAttrs: false,
                      // attrs: item,
                      /* props: {
                        ...item
                      }, */
                      attrs: {
                        align: 'center',
                        ...item
                      },
                      scopedSlots: {
                          default: props => {
                            if(item['renderHTML']) {
                              return item['renderHTML'](h, props);
                            } else if(item['formatter']){
                              return item.formatter(props.row,props.column,props.row[item.prop], props.$index)
                            } else {
                              return props.row[item['prop']]
                            }
                          }
                      },
                    })
                  })
                ]
              )
            },
            methods: {
    
            }
        }
    </script>
    <style lang="scss">
    
    </style>
    
    展开全文
  • el-table-column 动态列使用:formatter 动态列使用:formatter 动态列使用:formatter :formatter=“dataConversion” 和 使用如下: 在 v-html里面使用dataConversion 方法,解决冲突,返回值还可以返回html内容

    el-table-column 动态列使用:formatter

    动态列使用:formatter

    :formatter=“dataConversion” 和 <template slot-scope=“scope” 有冲突
    使用如下:
    在这里插入图片描述

    在 v-html里面使用dataConversion 方法,解决冲突,返回值还可以返回html内容

    展开全文
  • v-for循环生成的table,使用formatter选中其中一列并格式化 以保留两位小数为例:
  • el-table-column日期时间格式化

    千次阅读 2022-02-11 16:11:21
    el-table-column prop="endTime" label="结束时间" width="90" :formatter="formatDate"> </el-table-column> methods: { //方法区 formatDate(row, column) { // 获取单元格数据
  • el-table-column prop="isOverText" label="结清状态" align="center" :show-overflow-tooltip="true" color:red / > //这个样子加颜色是没有用的! 正确的例子! <el-table-column prop="isOverText...
  • 直接上代码 <el-table v-loading="loading" :data="companyList" @selection-change="handleSelectionChange" @cell-dblclick=...el-table-column type="selection" width="55" align="center" />
  • Ok, after a few hours of brainstorming I found pretty nice ... I'm putting it here for others - I hope this helps somebody.Value displayed in custom column can be:simple string (prop)formatted s...
  • 转换el-table-column
  • 对于格式化,有三种方法:...el-table-column prop="sex" label="性别"> <template slot-scope="scope"> <span v-if="scope.row.sex== 0">男</span> <span v-if="scope.row.sex== 1">女
  • el-table-column日期格式化

    万次阅读 2020-01-06 14:50:25
    如果想对表格某一列的内容格式化,可用 formatter 属性。属性绑定格式化的方法即可 <!--时间范围--> <el-table-column prop="startTime" ...
  • el-table中的column日期格式化
  • 如果想对表格某一列的内容格式化(性别\日期显示),可用 formatter 属性。 实战:日期显示 在method 定义formatDate 方法 formatDate(row, column) { // 获取单元格数据 let data = row[column.property] ...
  • el-table-column上加一个code属性, 无需其他配置就可以显示字典值 实现 新建组件, 给el-table-column套一层, 添加属性code, 在组件初始化后加载字典; 如果有code, 使用el-table-column的slot进行字典值的展示; ...
  • 记录一下自己的第一个博客 坚持就是胜利!!!
  • 条件更新column
  • el-table-column表格内加换行

    千次阅读 2020-11-10 15:04:30
    el-table-column :label="$t('storageBin.storagePlace')" width="200px"> <template slot-scope="scope"> <div v-html="$t('sidebar.warehouse')+' : '+scope.row.dWarehouseId+'<br/>'+ $t('...
  • elementui 之el-table-column 日期格式显示

    千次阅读 2021-02-15 02:29:57
    如果想对表格某一列的内容进行日期格式化,可用 formatter 属性。属性绑定日期格式化的方法即可。 前端代码之模板 <el-row>...el-table-column prop="title" label="通知标题" > </el-ta
  • 最近初步学习Vue开发web前端的table表格时,想通过字典中数据进行匹配展示,如下 <...el-table-column type="selection" width="55" align="center" /> <!--类型匹配转换--> <e
  • el-table格式化el-table-column内容 遇到一个需求,一个循环展示的table中的某项,或者某几项需要格式化。对于格式化的方法,主要有template scope、formatter; 一、template scope 、v-if判断 <el-table-column...
  • el-tableformatter属性的用法

    万次阅读 2020-09-30 16:44:13
    formatterel-table-column的一个属性,用来格式化内容。(比如后台给你返0或1,你需要展示成“否”和“是”) 二、详细使用 1.知道formatter之前: 代码如下(示例): <el-table :data="tabledata"> <...
  • 0){ return {'color':'#000000',} } else if (totalGrade >0){ return {'color':'#13ce66',} } } } }, 最后实现就是这样: 如果显示不同的值,可以使用 :formatter=“stateFormat” 写入方法判断: 如果后台没有字段...
  • el-table 中使用formatter格式化数据

    千次阅读 2021-09-26 16:57:30
    formatter这个属性来对传入的数据...el-table-column label="项目类型" :formatter="formatterType" prop="type"></el-table-column> methods: { formatterType(row){ switch(row.type){ case '1':...
  • element-ui的表格 el-table 使用formatter 对传入的数据进行自定义的格式化,截取字符串内的数字 转换成对应汉字
  • el-table-column prop="isKey" label="关键字列" align="center"&gt; &lt;template slot-scope="scope"&gt; &lt;el-checkbox :checked="scope....
  • <el-table :data="currentData" style="width: 80%;height:50%;" height="500px" v-if="chamberVisuble">...el-table-column align="center" label="Start Time" width="120" prop="START_TI...
  • 文中项目使用webpack打包, 通过定义别名在开发环境import elementui/TableColumn, 在生成环境使用window.ELEMENT.TableColumn 避免生成的文件过大 自定义组件 <script> /* 引入需要混入的TableColumn */ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,804
精华内容 721
关键字:

el-table-column formatter