Vue组件使用记录

Vue组件使用记录

1.公用dialog组件，接受父组件的表头和表数据，当表单中不同的输入类型时，可以在传过来的表头中增加标识，如例子：

父组件传过去的数据

Info: {
        title: '', // 标题
        item: [], // 输入项
        typeselect: [] // type选项列表
      }, // 弹框信息，title、item
info.item = [
        {
          name: '名称', // 表单的label
          type: 'input', //判断表单项类型，此处时input
          prop: 'name',  // 传过去需要绑定的prop值，建议唯一
          value: '这是传过去的value值'
        },
        {
          name: '是否动态',
          type: 'switch',
          prop: 'isDynamic',
          value: '这是传过去的value值'
        }
]

子组件接收，接收对象时，注意default的写法，必须是函数。

props: {
    Info: {
      type: Object,
      default: function() {
        return {}
      }
    }
  }

弹窗渲染的时候，填充myform对象，这是在子组件的data定义的对象

myform：{}

this.Info.item.forEach((item, index) => {
      this.$set(this.myform, item.prop, item.value) //prop作key， value作值，保证v-model绑定的唯一性
    })

<el-form :model="myform" :rules="rules" ref="myform">
        <el-form-item v-for="(item, index) in info.item" v-bind:key="index" :label="item.name" :prop="item.prop">
          <el-input v-if="item.type == 'input'" v-model="myform[item.prop]"></el-input>
          <el-switch
            v-if="item.type == 'switch'"
            v-model="myform[item.prop]"
            :active-value= '1'
            :inactive-value= '0'
          ></el-switch>
          <el-select v-if="item.type == 'selected'" v-model="myform[item.prop]">
            <el-option
              v-for="(selectedItem, index) in Info.typeselect"//这个是同时传过来的下拉选项值
              :key="index"
              :label="selectedItem.name"
              :value="selectedItem.value"
            ></el-option>
          </el-select>
        </el-form-item>
</el-form>

2.format替换ElementUi table表格循环获得的数据项：

<el-table-column
        v-for="(item, index) of tableHeader"
        v-bind:key="index"
        :label="item.label"
        :prop="item.prop"
        align="center"
      >
        <template slot-scope="scope">
          <span  v-if="item.format" >{{formatdata[scope.row[item.prop]]}}</span> //需要转换格式的format标识为true时
          <span v-else>{{scope.row[item.prop]}}</span> // 当其他不需要转换格式的format为false时，照常显示
        </template>
</el-table-column>

data是与之对应的包含key和value值的对象数组（其中key是未转换之前的值，value是需要的值）
比如

data: [
	{
		key:test1,
		value:testvalue1
	},
	{
		key:test2,
		value:testvalue2
	}
]

data.forEach(item => {
        this.$set(this.formatdata, item.key, item.value)
      })

这里得到的formatdata数据格式如下：

formatdata: {
	test1: testvalue1,
	test2: testvalue2
}