20210927152815.png

//关于zhsq小区页面的编辑界面弹出框双向绑定的一些细节：
因为弹出的对话框有下拉框部分、双向绑定下拉框数据时又要监听数据、与表格普通数据分开双向绑定
所以在computed中就要使用get()、set(val)来实现双向绑定
相关代码：

<el-form :model=form>
    <el-form-item label="公司名称" prop="companyDept">
      <el-select
        v-model="companyShow"
        placeholder="请选择公司名称"
        size="small"
        clearable
      >
        <!--  遍历对象时，item是每项对象的值、i是每项对象的键名，第三个参数是索引 -->
        <el-option 
          v-for="(item, i) in deptlist"
          :key="i"
          :label="item"
          :value="i"
        />
      </el-select>
    </el-form-item>
</el-form>

<script>
import { translationDictionary } from "@/utils/translationDictionary.js"
export default {
    data() { 
        form: {},
        deptlist: {},
    },
    created() { this.getDeptList() },
    methods: {
        //获取select框下options绑定的数据对象集合
        getDeptList() {
            listDept().then((response) => {
                let object = {}
                response.rows.forEach((el) => {
                    object[el.deptId] = el.deptName;
                })
                this.deptlist = object
            })
        },
    },
    computed: {
        companyShow: {
            get: function () {
                if (this.form1.companyDept == undefined) return;
                return this.translationDictionary(this.form1.companyDept, this.deptlist, 2);
            },
            set: function (value) {
                if (value == undefined) return;
                this.form1.companyDept = this.translationDictionary(value, this.deptlist, 1);
                console.log(this.form1.companyDept); //得到数字字符串
            }
        }
    },
}
</script>

//封装的一个select转换方法
export function translationDictionary(value, arr, state) {
  if (state == 1) {
    return TextToNum(value, arr);
  } else if (state == 2) {
    return NumToText(value, arr);
  }
}

// 文字转数字
function TextToNum(text, arr) {
  if(arr.length){
    return arr.indexOf(arr[text]);
  }else{
    return text;
  }
}
// 数字转文字
function NumToText(num, arr) {
  return arr[num];
}

// 从字典中拿数据转换为数组
export function DictionaryToArr(data) {
  let arr = [];
  data.forEach(el => {
    arr.push(el.dictLabel);
  });
  return arr;
}