<template>
  <el-table
    ref="multipleTable"
    :data="data"
  >
    <el-table-column prop="family_name" label="姓名" align="center">
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
          @click="handleEdit(scope.row)"
          type="text"
          size="small"
          >用戶(hù)信息</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    data(){
      return {
        data:[]
      }
    },
    methods:{
      handleEdit(){}
    }
  }
</script>

  // ...
  <el-table-column label="操作" align="center">
    <template slot-scope="scope">
      <div v-html="item.render(scope)"></div>
    </template>
  </el-table-column>

<script>
  export default {
    props:{
      render:{
        type:Function,
        default:()=>()=>{}
      },
      scope:{
        type:Object,
        default:()=>{}
      }
    },
    render(h){
      const { row, column, $index } = this.scope
      return this.render(h,row,column,$index)
    }
  }
</script>

<template>
  <el-table
    ref="multipleTable"
    :data="data"
  >
    <el-table-column v-for="item in columns" :label="item.lable" :prop="item.prop">
      <template slot-scope="scope">
        <render-column v-if="item.render" :render="item.render" :scope="scope" />
        <span v-else>{{scope.row[item.prop]}}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    data(){
      let $this = this
      return {
        data:[],
        columns:[
          {
            label:'姓名',
            prop:'name'
          },
          {
            label:'操作',
            render(h,row,column){
              return <el-button
                      onClick={$this.handleEdit(row)}
                      type="text"
                      size="small"
                      >用戶(hù)信息</el-button>
            }
          }
        ]
      }
    },
    methods:{
      handleEdit(){}
    }
  }
</script>

<template>
  <div class="edit-cell">
    <el-popover :value="validateMsg !== ''" trigger="manual">
      <div slot="reference">
        <span v-if="!editable" @click="handleEditable"
          >{{ editValue }}
          <i class="el-icon-edit"></i>
        </span>
        <el-input
          ref="input"
          autofocus
          v-else
          v-model="editValue"
          @change="handleEditable"
          @blur="handleEditable"
        />
      </div>
      <span style="color: #f5222d">{{ validateMsg }}</span>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: "edit-cell",
  props: {
    value: String,
    validator: {
      type: Function,
      default: () => null
    }
  },
  data() {
    return {
      editValue: "",
      editable: false,
      validateMsg: ""
    };
  },
  mounted() {
    this.editValue = this.value;
  },
  methods: {
    handleEditable() {
      if (this.editable && typeof this.validator === "function") {
        const err = this.validator(this.editValue);
        if (err) {
          this.validateMsg = err;
          return;
        }
        this.validateMsg = "";
      }
      this.editable = !this.editable;
      if (this.editable) {
        this.$nextTick(() => {
          this.$refs.input.focus();
        });
      }
      this.$emit("change", this.editValue);
    }
  }
};
</script>

export default {
  // ...
  mounted() {
    // 復(fù)制數(shù)據(jù)，數(shù)據(jù)倉(cāng)
    this.copyData = [...this.data];
    // 切割數(shù)據(jù)
    this.init();
  },
  computed: {
    boxStyle() {
      return {
        transform: `translate(0, ${this.translateY}px )`,
      };
    },
    total() {
      return this.data.length;
    },
  },
  watch: {
    data(newData) {
      this.copyData = [...newData];
      this.init();
    },
    translateY() {
      this.handleDataScorll();
    },
  },
  methods: {
    init() {
      if (!this.virtual) {
        // 非虛擬列表管滾動(dòng)，則直接展示所有數(shù)據(jù)
        this.pageOptions.pageSize = this.total;
      }
      if (this.total > 0) {
        this.splitData();
        this.move();
      }
    },
    move() {
      this.stop();
      this.animationFrame = requestAnimationFrame(() => {
        if (this.total > 0) {
          this.translateY -= this.speed;
        }

        this.move();
      });
    },
    splitData() {
      if (!this.virtual) {
        this.preData = [...this.copyData];
        this.nextData = [...this.copyData];
        return;
      }
      // 只有在虛擬列表時(shí)，才調(diào)換數(shù)據(jù)位置
      this.copyData = [...this.copyData, ...this.preData];
      // pre
      this.preData = this.copyData.splice(0, this.pageOptions.pageSize);
      // next
      this.nextData = this.copyData.slice(0, this.pageOptions.pageSize);
    },
    /**
     * 監(jiān)聽(tīng)滾動(dòng)的距離
     */
    handleDataScorll() {
      if (
        Math.abs(this.translateY) <
        this.pageOptions.pageSize * this.itemWidth
      ) {
        return;
      }
      // this.stop();
      // 第一頁(yè)已滾動(dòng)完成
      if (this.virtual) {
        this.splitData();
      }
      this.translateY = 0;
    },
    stop() {
      if (this.animationFrame) {
        cancelAnimationFrame(this.animationFrame);
      }
    }
  },
};

  optionsData: function () {
    let arr = [[...this.data]]
    for (let id of this.selectedData) {
      if (!id) {
        arr.push([])
        break
      }
      let data = arr[arr.length - 1].find((item) => item.id === id)
      if (!data) {
        arr.push([])
        break
      }
      arr.push(data.children || [])
    }
    return arr
  }

<template>
  <div class="cascade-select-city">
    <el-select
      placeholder="請(qǐng)選擇"
      v-for="(val, index) in selectedData"
      :key="index"
      :value="selectedData[index]"
      @change="handleSelect($event, index)"
    >
      <el-option value="">請(qǐng)選擇</el-option>
      <el-option
        v-for="item in optionsData[index]"
        :key="item.id"
        :label="item.name"
        :value="item.name"
      />
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'cascade-select',
  props: {
    /**
     * 用于自定義級(jí)聯(lián)數(shù)據(jù)
     */
    data: {
      type: Array,
      default: () => []
    },
    /**
     * 聯(lián)動(dòng)層級(jí)數(shù)量
     */
    level: {
      type: Number,
      default: 1
    },
    /**
     * 綁定數(shù)據(jù)
     */
    value: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      selectedData: new Array(this.level).fill('')
    }
  },
  mounted () {
  },
  watch: {
    value (val, oldVal) {
      if (JSON.stringify([val]) !== JSON.stringify([this.selectedData])) {
        //
        this.selectedData = [...val]
      }
    }
  },
  computed: {
    /**
     * 處理層級(jí)數(shù)據(jù)
     */
    optionsData: function () {
      let arr = [[...this.data]]
      for (let id of this.selectedData) {
        if (!id) {
          arr.push([])
          break
        }
        let data = arr[arr.length - 1].find((item) => item.AreaId === id)
        if (!data) {
          arr.push([])
          break
        }
        arr.push(data.children || [])
      }
      return arr
    }
  },
  methods: {
    /**
     * 處理聯(lián)動(dòng)的select
     */
    handleSelect (selected, level) {
      // 更新值
      this.selectedData = this.selectedData.map((val, index) => {
        if (index < level) {
          return val
        }
        return index === level ? selected : ''
      })
      this.$emit('change', this.selectedData)
    }
  }
}
</script>