前端那些事20240119-前端那些事-avue表格行内容格式化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>

运行结果