avue-crud中格式化数据格式

最新推荐文章于 2024-06-04 08:00:00 发布

纯洁的小新

最新推荐文章于 2024-06-04 08:00:00 发布

阅读量2.3k

点赞数 1

文章标签： sql javascript 数据库

本文链接：https://blog.csdn.net/qq_44872773/article/details/126027657

版权

一、直接把函数写在formatter后面

<avue-crud :data="data" :option="option"></avue-crud><script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男',
            select:'110000'
          }, {
            name:'李四',
            sex:'女',
            select:'120000'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              formatter:(val,value,label)=>{
                return val.name+'格式化内容'
              }
            }, {
              label:'性别',
              prop:'sex'
            },{
              label: '字典',
              prop: 'select',
              type: 'select',
              formatter:(val,value,label)=>{
                return `${label}(${value})`
              },
              props: {
                label: 'name',
                value: 'code'
              },
              dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
            }]
        },
      };
    }
}
</script>

二、引用一个methods中的函数，便于代码重构

<avue-crud :data="data" :option="option"></avue-crud><script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男',
            select:'110000'
          }, {
            name:'李四',
            sex:'女',
            select:'120000'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              formatter:(val,value,label)=>{
              	//引用methods中的函数，但是必须使用使用箭头函数包裹一层，直接使用是找不到函数fmt的
	              this.fmt(val,value,label)
              }
            }, {
              label:'性别',
              prop:'sex'
            },{
              label: '字典',
              prop: 'select',
              type: 'select',
              formatter:(val,value,label)=>{
                return `${label}(${value})`
              },
              props: {
                label: 'name',
                value: 'code'
              },
              dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
            }]
        },
      };
    },
    methods: {
		fmt(val,value,label){
           return val.name+'格式化内容'
        }
	}
}
</script>