<div>
  <sly-el-table-selection-container
    :data="data.{{{widget.widget_id}}}.table"
    :selected="state.{{{widget.widget_id}}}.selected"
    :identity="(row) => state.{{{widget.widget_id}}}.selected.find(s => s[0] === row.name1 && s[1] === row.name2)"
  >
    <el-table
      ref="sly-el-table-with-selection"
      class="ultra-table"
      :data="data.{{{widget.widget_id}}}.table"
      @selection-change="
                (val) => {
                    state.{{{widget.widget_id}}}.selected = val.map(x => [x.name1, x.name2]);
                }
                "
    >
      <el-table-column
        v-if="data.{{{widget.widget_id}}}.selectable"
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="name1"
        :label="data.{{{widget.widget_id}}}.left_name"
      >
        <template scope="scope">
          <div v-if="scope.row.name1">
            <i class="zmdi zmdi-circle" :style="{color: scope.row.color1}"></i>
            <span class="mr10 ml10">{{ scope.row.name1 }}</span>
            <span style="color: #7f858e"
              ><i :class="scope.row.shapeIcon1"></i> {{ scope.row.shape1
              }}</span
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="info" label="Compare">
        <template scope="scope">
          <div :style="{color: scope.row.infoColor}">
            <span style="width: 25px; display: inline-block">
              <i v-for="icon in scope.row.infoIcon" :class="icon"></i>
            </span>
            <span class="mr10 ml10">{{ scope.row.infoMessage }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        sortable
        prop="name2"
        :label="data.{{{widget.widget_id}}}.right_name"
      >
        <template scope="scope">
          <div v-if="scope.row.name2">
            <i class="zmdi zmdi-circle" :style="{color: scope.row.color2}"></i>
            <span class="mr10 ml10">{{ scope.row.name2 }}</span>
            <span style="color: #7f858e"
              ><i :class="scope.row.shapeIcon2"></i> {{ scope.row.shape2
              }}</span
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </sly-el-table-selection-container>
</div>
